11 parasta CSS-editoria - Arvosteltu

1. Stylizer

yhteensopivuus: WindowsMerkittävä ominaisuus: Koodiruudukko, koon Gripit, Bullseye, Kaksiosainen väritys

Stylizer on täysin ainutlaatuinen CSS-editori, joka keskittyy reaaliaikainen CSS-muokkaus. Voit syöttää Web-osoitteen sisäänrakennettuun selaimeen, joka tukee Firefox 3.5: n ja IE7: n tyylin määritelmää, ja sillä olisi kaikki siihen liittyvät CSS-säännöt, joita voit muokata tuttuun point-and-click -liitäntään.

Editorissa on a Code Grid ominaisuus, joka tekee CSS-muokkauksesta helpompaa, koska voit tarkastella tulosta heti sen jälkeen, kun olet muuttanut arvoa. Myös sen diagnostiikka napakymppi Voit tarkastella niihin liittyviä osia tietyssä osassa sivustoa ja muokata niitä pisteillä ja napsautuksilla. Muita ominaisuuksia, kuten Koko Gripit voit säätää CSS-elementin sijaintia visuaalisesti ja Kaksoisnapsautus Väritys ominaisuus, jolle on myönnetty Photoshopin kaltainen värivalitsin, jotta voit valita minkä tahansa värin sivustollesi. Voi, mainitsin, että kaikki nämä muutokset tehdään reaaliaikaisesti ja välittömästi näkyvissä?

Kanssa Stylizer on vain mahdotonta tehdä CSS-virhettä, koska se rajoittaisi sinua asettamasta mitään arvoa, joka ei ole yhteensopiva vastaavan CSS-ominaisuuden kanssa. Ohjelmisto ei kuitenkaan pysty lataamaan tiettyjä CSS-tiedostoja joskus selittämättömän kriittisen virheen vuoksi.

Stylizer mukana tulee Basic- ja Ultimate-versio. Vaikka Basic-versio on täysin ilmainen, Ultimate-versio on saatavilla 14 päivän ajan asennuksen jälkeen, ja se tarjoaa sinulle 85 dollaria, jotta voit jatkaa edistyneiden ominaisuuksiensa käyttöä, kuten Bullseye.

2. TopStyle

yhteensopivuus: WindowsMerkittävä ominaisuus: Style Inspector, Style Sweeper, CSS Tidy

TopStyle CSS -editori alkaa hämmästyttää sinua ensimmäisen kerran, kun voit valita tyyliasetuksen, joka näyttää vain Firefoxin, Internet Explorerin, Safarin tai jopa iPhone OS 2.0: n tukemat ominaisuudet ja arvot. nettisivujen suunnittelija.

Kaikista löydetyistä ominaisuuksista Style Inspector on erityisen hyödyllinen, koska se toimii paneelina, jossa voit sisällyttää minkä tahansa CSS-ominaisuuden yksinkertaiseen point-and-click -liitäntään. Kun olet valinnut kaikki haluamasi CSS-ominaisuudet, lähdekoodi luodaan automaattisesti, jotta voit säästää aikaa toistuvilta ja väsyttäviltä koodauksilta.

Toinen hyvä juttu TopStyle se näyttää selaimen yhteensopivuuden tyylitarkastajansa alapuolella, jonka näet joko CSS-ominaisuuden tukemana tiettyyn Internet-selaimen versioon, kuten Internet Explorer 7: ään, tai se on hirveän buginen.

Toimittaja on kokeiluversio, jossa on rajoitettu ominaisuus, ja voit avata sen täyden potentiaalin 79,95 dollarilla.

3. Style Master

yhteensopivuus: Windows, Mac OS XMerkittävä ominaisuus: Tyylitaulukon malli

Väitteli itsensä mestariksi, Style Master teki melko hyvin CSS-muokkausympäristön luomiseksi minkä tahansa asiantuntemuksen tasolle. Ohjelmisto ei ainoastaan ​​tarjoa WYSIWYG-editorille, joka pehmentää CSS-aloittelijan työnkulkua, vaan myös antaa sinulle mahdollisuuden tutustua tarkasti kaikkiin CSS-ominaisuuksiin, joita asiantuntija voi viitata. Voit selata ja valita CSS-ominaisuuksia joko luokassa tai aakkosjärjestyksessä.

Ehkä kaikkein ainutlaatuisin piste on, että editori sisältää lähes 20 hyödyllistä tyylitaulukon mallia, joita voit aloittaa, eikä yllättävää, että tyylin mestarilla on erittäin puhtaita, hyvin järjestettyjä ja ammattitaitoisia CSS-sääntöjä, jotka on määritelty sen sisäänrakennetussa mallissa.

Voit nauttia täysin varustellusta ohjelmistosta 30 päivän ajan ja maksaa joko 59,99 dollaria tai 29,99 dollaria koulutuksen lisenssistä, jotta se avaisi koko potentiaalinsa uudelleen.

4. Xyle-laajuus

yhteensopivuus: macMerkittävä ominaisuus: Valintatila, Smart-ryhmä, tekstieditorin integrointi

Xyle Scope on a Ilmainen CSS-editori Macille, koska se on todella ammattimainen CSS-editori, jonka avulla voit surffata verkkosivustoa ja hienosäätää CSS: ää suoraan editorissa.

Xyleen selain mukana tulee tavallinen selaintila ja valintatila, joka toimii aivan samankaltaisena kuin Firefox-plugin, Firebug, joka tarjoaa CSS-lähdekoodin ja muokkauksen, paitsi että editorilla voit tallentaa muokatut CSS-arvot alkuperäiseen sijaintiin.

Käyttämällä 'Smart-ryhmä"ominaisuus, voit suodattaa kaikki säännöt, jotka vaikuttavat tapaan, jolla linkit näytetään tai jotka vastaavat ulkoasusta, voit jopa kaventaa tulosta sisäänrakennetulla hakutoiminnollaan, ei enää kokeiluversiota!

Xyle Scope tarjoavat myös integroinnin ulkoisiin tekstieditoreihin, kuten BBEditiin, helpottamaan ja säästämään energiaa säästäviä koodaustöitä, vain muutokset ja joko tekstieditori tai Xyle Scope päivittävät kaikki muutokset automaattisesti sinulle.

5. Rapid CSS

yhteensopivuus: WindowsMerkittävä ominaisuus: Syntaksi korostus, koodin suorittaminen, CSS-muotoilu

Rapid CSS on tapa, jolla CSS-muokkaus on mukava, kätevä ja monimutkainen. Siinä on oma täysin muokattava tekstieditori, jossa on hyödyllisiä ominaisuuksia, kuten syntaksin korostus, koodin suorittaminen ja sisäänrakennettu CSS-viite kivuttomalle koodauskokemukselle.

Huolehtimalla CSS: n siisteydestä voit muotoilla CSS-tyylitaulukon, kuten järjestää ne uudelleen CSS-tyypin mukaan tai luoda lyhytominaisuuksia, jotta tyylitaulukko näyttää mukavammalta ja suloisemmalta. Sisäänrakennettu koodivahvistin varmistaa myös, että tyylisivu ei ole vain puhdas, vaan voimassa.

Toimittajalla on 30 päivän arviointikausi, jossa on 30 käyttötarkoitusta, voit siirtyä täydelliseen versioon 29,85 dollaria.

6. Tyyli-studio

yhteensopivuus: WindowsMerkittävä ominaisuus: CSS-ohjattu toiminto, IntelliStyle

Style Studion tärkein kauneus kuuluu sen CSS-ohjattuun toimintoon, joka tarjoaa sinulle välittömän CSS-vaikutuksen muutamalla pisteellä ja napsautuksella.

Voit esimerkiksi valita kirjasintoiminnon, valita sitten kirjasinperheen ja asettaa sille kirjasinkoon, sitten fonttityylin, painon, variantin… ja puomin! Säännöt lisätään tyylitaulukkoon täysin validoiduksi CSS-koodiksi.

Ohjattu toiminto sisältää myös värin, reunan, tekstin, paikannuksen, luokituksen ja lopulta suodattaa säännöt, vain lähes kaiken, mitä voit ajatella CSS: stä. Nämä velhot ovat melko hyödyllisiä, koska sinun ei tarvitse kirjoittaa toistuvasti tiettyä monimutkaista CSS-tehoa varten. Toinen jalo ominaisuus on IntelliStyle, joka toimii kuten koodin suorittaminen, jotta voit valita tiettyjä CSS-ominaisuuksia suunnittelutarkoitukseen.

Tämän editorin haittapuoli olisi sen vanhentunut selaimen tyylitarkennustuki, koska se tukee vain jopa IE6: a ja hyvin, ei Firefoxia.

Sinulle myönnetään 30 päivää aikaa nauttia ohjelmistosta ja 49,99 dollaria hankkia se.

7. CSSEdit

yhteensopivuus: macMerkittävä ominaisuus: X-ray Inspector, Visual Editor, Selector Builder

Suunnittele kauniita, innovatiivisia ja nopeasti lataavia web-sivustoja, joissa on kaunis, innovatiivinen ja nopea sovellus, joka on CSSEdit by MacRabbit. CSSEdit on suunniteltu kaikentyyppiseen asiantuntemukseen, kuten Selector Builderin ja älykkään lähdekoodin ympäristöön.

Tämän kaltaisen kiillotetun editorin avulla odotetaan, että CSS-tyylitaulukon muutokset näkyvät reaaliaikaisesti ilman, että saat väsyttävää lataus- ja päivitystoimintoa. Röntgen-tarkastaja luodaan myös ominaisuutena CSS-koodin diagnosoimiseksi tietystä sivuston osasta.

Innovatiivinen osa CSSEdit on luultavasti sen Selector Builder jonka avulla voit kuvata CSS-tyylisi yksinkertaisella englanninkielisellä, ei paljon kiinnostusta asiantuntijalle, mutta hyödyllistä ehdottomalle aloittelijalle.

Demoversio sallii sinun tallentaa tiedostoa, jossa on vähemmän kuin 2500 merkkiä, ja voit maksaa 39,95 dollaria kaikkien rajoitusten poistamiseksi.

8. EngInSite CSS Editor

yhteensopivuus: WindowsMerkittävä ominaisuus: Mittaustyökalu esikatselutilassa

Jos olet vakava suunnittelija, joka huolehtii oikeasta CSS-määrityksestä, oikea CSS-sijoitus tai CSS-tyylitaulukon on oltava täysin validoitu, sitten EngInSite CSS -editori voi olla suosikkieditori.

Tässä editorissa voit lisätä luokan, tunnuksen ja elementin valitsimen sisäänrakennetun tarkastajan avulla. Voit myös muuntaa värin joko Hex- tai RGB-arvoksi, joka on hyvin harvinainen ominaisuus CSS-editorille. Voit tarkkailla tuloksia esikatselupaneelissa mittaustyökaluilla varmistaaksesi, että jokainen muotoiluelementti on oikeassa asennossa.

Editorilla on myös koodin valmistus, mutta se on vähän buginen, joten sanoisin, että se on puoliksi koodattu. Muussa tapauksessa koko editori on mukava käyttää, paitsi se, että editori on varsin vanhentunut selaimen tyylin defnition -tukeen, koska se tukee vain IE6: n tyylin määritelmää.

9. Tyylitaulukon valmistaja

yhteensopivuus: WindowsMerkittävä ominaisuus: CSS-tunnisteet

Tyylitaulukon valmistaja on jälleen yksi tavallinen CSS-editori, joka tarjoaa puhtaita koodauspintoja tiedostojen selaimen paneelilla ja joitakin hyödyllisiä CSS-työkaluja fontin, värin, marginaalin, reunan jne. Määrittämiseen..

Verrattuna useisiin CSS-editoreihin Rapid CSS tai Style Studio, Makerilla on vähemmän ominaisuutta, mutta erittäin puhdas käyttöliittymä, ja tämä on hyvä tietyille aloittelijoille, jotka eivät halua saada asioita monimutkaisiksi, tai CSS ninja, joka haluaa kaiken minimaalisen ja mukavan.

Vaikka tämä editori on suunniteltu keskikäyttäjälle, sen CSS-tunnisteiden ominaisuus voi auttaa yksinkertaisesti luomaan CSS-säännön, jossa on tunnisteita napsautuksella.

Tämä maksaa $ 34 omalle editorille, tai voit ostaa sen muiden CoffeeCup-ohjelmistojen kanssa nipun ostoina.

10. Arduo CSS

yhteensopivuus: WindowsMerkittävä ominaisuus: Solmu, CSSTidy

Arduo CSS on syntynyt CSS-editori, jonka tavoitteena on miellyttää sinua intuitiivisella ja helppokäyttöisellä käyttöliittymällä. Sen puhtaan käyttöliittymän ja syntaksin korostamisen ansiosta olet taattu luomaan ja muokkaamaan CSS-tiedostoa ilman liikaa vaivaa ja keskeytyksiä. Voit myös määritellä CSS-säännöt pisteiden ja napsautusten avulla.

Niille, jotka tuntevat tyylitaulukon olevan liian raskas, editorin CSSTidy-työkalu voi auttaa sinua optimoimaan tyylitaulukon ja poistamaan kaikki tarpeettomat koodit.

Toimittaja on vapaasti saatavilla sen virallisella sivustolla.

11. Yksinkertainen CSS

yhteensopivuus: Windows, Mac OS XMerkittävä ominaisuus: CSS-tiedoston tuonti, Point-and-click -liitäntä, lisäfonttitietokanta

Aivan kuten sen nimi, Simple CSS: llä on kaikki, mitä suunnittelija tarvitsee yksinkertaiseen CSS-muokkaukseen. Voit tuoda CSS-tiedoston editoriin ja muokata sitä muutamalla napsautuksella, tarkistaa tulokset esikatselupaneelistaan ​​ja ottaa lähdekoodin heti käyttöön.

Vaikka voit tuoda lähes jokaista CSS-tiedostoa editoriin, voit tarkastella vain yhtä CSS-sääntöä kerralla napsautuksella, ja joskus tuonti aiheuttaa virheitä sen rajoituksen vuoksi, kuten ei @ rules-tukea. Myös itse editori ei ole niin joustava kuin voit valita vain 'Auto' tai 'Inherit' z-indeksiominaisuuksille, mutta ei anna suoraan omaisuudelle arvoa.

Siitä huolimatta se on ilmainen ja melko kätevä suunnittelijalle, joka tarvitsee pikaista korjausta.

Bonus: Lisää toimittajia ja työkaluja

Vaikka ne eivät ole tarkalleen CSS-editorit, nämä seuraavat työkalut ovat jotain, mitä haluat ehkä CSS: n muokkaamisessa.

pyromaani

Suosituin ja tehokkain web-kehitystyökalu, joka tarkastaa HTML: n, muuttaa CSS-tyyliä ja nähdä muutokset reaaliajassa, saatavana Firefox-selaimen laajennuksena.

CSS-käyttö

Firebug-laajennus, jonka avulla voit skannata sivustosi useita sivuja nähdäksesi, mitä CSS-sääntöjä käytetään sivustossasi.

Web-kehittäjä

Firefox-laajennus, jolla voit tehdä paljon viileitä asioita, kuten tarkastella CSS-lähteitä tai poistaa tiettyjä CSS-tyylitaulukoita suunnittelua tai kehitystä varten.

Muistilehtiö++

Ilmainen lähdekoodieditori ja Muistikirja-korvaus, joka tukee useita kieliä, kuten CSS. Sisältää toimintoja, kuten Function Completion, joka auttaa rakentamaan CSS-suunnittelua.

coda

Edistynyt tekstieditori, jossa on sisäänrakennettu CSS-editori, joka tarjoaa sinulle kaksi CSS-muokkaustilaa joustavampaan suunnittelukokemukseen ja voi nähdä tuloksen heti muutosten jälkeen.

NetBeans IDE

Avoimen lähdekoodin ja ammatillisen integroidun kehitysympäristön, jossa on täydellisin CSS-viite sen koodin valmistusominaisuudessa.

Aptana Studio

Täydellinen web-kehitysympäristö, jossa yhdistyvät tehokkaat HTML-, CSS- ja JavaScript-kirjoitustyökalut, tukee tällä hetkellä jopa HTML5: ää ja CSS3: a..

WebStorm

JetBrainin IDE, joka toteuttaa asiaankuuluvan automaattisen täydennyksen kaikkeen, mukaan lukien CSS, voi myös ilmoittaa CSS-ongelmista lennossa.