11 Top CSS-editors - beoordeeld

1. Stylizer

Compatibiliteit: ramenOpmerkelijke functie: Code raster, formaatgrepen, bullseye, tweekleurig kleuren

Stylizer is een absoluut unieke CSS-editor waarop wordt scherpgesteld realtime CSS-bewerking. U kunt gewoon een webadres invoeren in de ingebouwde browser die de stijldefinitie van Firefox 3.5 en IE7 ondersteunt, en het zou alle bijbehorende CSS-regels geladen hebben die u kunt bewerken met de vertrouwde point-en-click interface.

De editor wordt geleverd met een Code Grid functie die uw CSS-bewerking handiger maakt, omdat u het resultaat onmiddellijk kunt bekijken nadat u een waarde hebt gewijzigd. Ook met zijn diagnose In de roos functie, kunt u geassocieerde elementen bekijken op een bepaald deel van de site en deze bewerken met punten en klikken. Andere functies zoals Maatgrepen Hiermee kunt u de positie van een CSS-element visueel aanpassen, en met Tweekliktekleuren functie krijgt u een Photoshop-achtige kleurkiezer om elke kleur te kiezen voor, laten we zeggen, het lettertype van uw site. Oh, heb ik al gezegd dat al deze bewerkingen worden uitgevoerd in real-time, direct zichtbaar resultaat?

Met Stylizer het is gewoon onmogelijk om een ​​CSS-fout te maken, omdat het u zou beperken om een ​​waarde te plaatsen die niet compatibel is met de overeenkomstige CSS-eigenschap. De software kon echter bepaalde CSS-bestanden soms niet laden vanwege de onverklaarde kritieke fout.

Stylizer komt met Basic en Ultimate-versie. Hoewel de basisversie volledig gratis is, is de Ultimate-versie 14 dagen na de installatie beschikbaar voor u en biedt deze u $ 85 om zijn geavanceerde functies zoals Bullseye te blijven gebruiken.

2. TopStyle

Compatibiliteit: ramenOpmerkelijke functie: Style Inspector, Style Sweeper, CSS Tidy

De CSS-editor van TopStyle begint je te verbazen door de eerste configuratie, wanneer je een stijldefinitie kunt kiezen die alleen eigenschappen en waarden laat zien die worden ondersteund door Firefox, Internet Explorer, Safari of zelfs iPhone OS 2.0, wat praktisch handig is voor platformoverschrijdende doeleinden webdesigner.

Van alle functies die ik heb gevonden Style Inspector is vooral handig, omdat het werkt als een paneel waarmee u elke CSS-eigenschap kunt opnemen met een eenvoudige point-en-click-interface. Wanneer u klaar bent met het kiezen van alle gewenste CSS-eigenschappen, wordt de broncode automatisch voor u gegenereerd om uw tijd te besparen door repetitieve en vermoeiende codering.

Over elkaar goede dingen over Top stijl toont het browsercompatibiliteit onder zijn stijlinspector, die u kunt zien dat de CSS-eigenschap volledig wordt ondersteund door bepaalde versies van de webbrowser zoals Internet Explorer 7, of het is vreselijk met fouten.

De editor wordt geleverd als een proefversie met een beperkte functie en u kunt het volledige potentieel ontgrendelen met $ 79,95.

3. Stijlmeester

Compatibiliteit: Windows, Mac OS XOpmerkelijke functie: Stylesheet-sjabloon

Hij claimde zichzelf als een meester en Style Master deed het vrij goed om een ​​CSS-bewerkingsomgeving voor elk niveau van expertise te creëren. De software biedt niet alleen de WYSIWYG-editor die de workflow voor CSS-beginner vlotter maakt, maar geeft u ook toegang tot de zeer gedetailleerde informatie over elke CSS-eigenschap waar deskundigen naar kunnen verwijzen. U kunt CSS-eigenschappen doorzoeken en kiezen per categorie of alfabetische volgorde.

Misschien wel het meest unieke punt is dat de editor zelf bijna 20 bruikbare stylesheet-sjablonen bevat om mee te beginnen, en niet verrassend voor een stijlmeester om zeer schone, overzichtelijke en professionele CSS-regels te hebben die zijn gedefinieerd in de ingebouwde sjabloon.

Je kunt 30 dagen lang genieten van de volledig uitgeruste software en $ 59,99 of $ 29,99 betalen voor onderwijslicentie om zijn volledige potentieel opnieuw te openen.

4. Xyle Scope

Compatibiliteit: MacOpmerkelijke functie: Selectiemodus, Smart Group, Teksteditor-integratie

Xyle Scope is een must-have gratis CSS-editor voor Mac, omdat het een echt professionele CSS-editor is waarmee je op de website kunt surfen en de CSS rechtstreeks in de editor kunt verfijnen.

Xyle's browser wordt geleverd met de normale browsermodus en selectiemodus die behoorlijk op elkaar lijkt, zoals Firefox-plug-in, Firebug die de CSS-bron weergeeft en bewerkt, behalve dat de editor u toestaat gewijzigde CSS-waarden op hun oorspronkelijke locatie op te slaan.

De ... gebruiken 'Smart Group'functie, kun je alle regels filteren die van invloed zijn op de manier waarop links worden weergegeven of degenen die verantwoordelijk zijn voor de lay-out, je kunt het resultaat zelfs verkleinen met de ingebouwde zoekfunctie, geen trial-and-error methode meer!

Xyle Scope bieden ook integratie met externe teksteditors zoals BBEdit voor eenvoudiger en energiezuinig codeerwerk, doe gewoon een verandering en de teksteditor of Xyle Scope zal alle wijzigingen automatisch voor u bijwerken.

5. Snelle CSS

Compatibiliteit: ramenOpmerkelijke functie: Syntaxis markeerstift, codeaanvulling, CSS-opmaak

Rapid CSS is de manier voor comfortabelere, handigere en complexere CSS-bewerkingen. Het heeft een eigen, volledig aanpasbare teksteditor met handige functies zoals syntax highlighting, codeaanvulling en ingebouwde CSS-referentie voor pijnloze codeerervaring.

Zorgend voor de netheid van uw CSS, kunt u uw CSS-stylesheet opmaken, bijvoorbeeld herschikken op CSS-type of stenografische eigenschappen creëren om het stylesheet er comfortabeler en zoeter uit te laten zien. De ingebouwde codevalidator zorgt er ook voor dat uw stylesheet niet alleen schoon maar ook geldig is.

De editor komt met 30 dagen evaluatieperiode met 30 keer gebruik, je kunt voor de volledige versie gaan met $ 29,85.

6. Stijlstudio

Compatibiliteit: ramenOpmerkelijke functie: CSS-wizard, IntelliStyle

De belangrijkste schoonheid van Style Studio ligt in de CSS Wizard-functie, die ervoor zorgt dat u onmiddellijk een CSS-effect krijgt met weinig punten en klikken.

U kunt bijvoorbeeld een wizard voor lettertypen selecteren, vervolgens een lettertypefamilie kiezen en er een lettergrootte voor instellen, dan lettertype, gewicht, variant ... en boem! Regels worden in het stylesheet ingevoegd als een volledig gevalideerde CSS-code.

Wizard-functie bevat ook kleur-, grens-, tekst-, positionering-, classificatie- en ten slotte filterregels, bijna alles wat u kunt bedenken voor CSS. Deze wizards zijn erg handig omdat je niet herhaaldelijk hoeft te typen om een ​​bepaald gecompliceerd CSS-effect te bereiken. Een ander nobel kenmerk is IntelliStyle, dat fungeert als codevermindering voor u om bepaalde CSS-eigenschappen te kiezen voor uw ontwerpdoel.

Het nadeel van deze editor is de ondersteuning voor de definitie van de verouderde browser, omdat deze alleen ondersteuning biedt voor IE6 en, nou ja, geen Firefox.

Je krijgt 30 dagen om te genieten van de software en $ 49,99 om het te kopen.

7. CSSEdit

Compatibiliteit: MacOpmerkelijke functie: X-ray Inspector, Visual Editor, Selector Builder

Ontwerp prachtige, innovatieve en snelladende websites met een mooie, innovatieve en snelle app, dat is CSSEdit van MacRabbit. Van functies zoals Selector Builder tot intelligente bronomgeving, CSSEdit is ontworpen voor elk niveau van expertise.

Met de zeer gepolijste editor zoals deze, wordt van u verwacht dat u wijzigingen in uw CSS-stylesheet in realtime ziet verschijnen, zonder dat u moe wordt van uploaden / verversen. X-ray inspector is ook gemaakt als een functie voor het diagnosticeren van CSS-code van een specifiek deel van de site.

Het innovatieve deel van de CSSEdit is waarschijnlijk het Selector Builder waarmee je je CSS-stijl kunt beschrijven met gewoon Engels, weinig interesse voor een expert maar nuttig voor absolute beginners.

Demoversie beperkt je om een ​​bestand met minder dan 2500 tekens op te slaan, terwijl je $ 39,95 kunt betalen om alle beperkingen weg te vagen.

8. EngInSite CSS-editor

Compatibiliteit: ramenOpmerkelijke functie: Meetinstrument in de voorbeeldmodus

Als u een serieuze ontwerper bent die om correcte CSS-specificaties, juiste CSS-plaatsing of uw CSS-stylesheet geeft, moet deze volledig zijn gevalideerd, dan kan EngInSite CSS-editor uw favoriete editor zijn.

In deze editor kunt u klasse-, id- en elementselector toevoegen met behulp van de ingebouwde inspector. U kunt de kleur ook converteren naar Hex- of RGB-waarde, wat een zeer zeldzame functie is voor een CSS-editor. U kunt uw resultaat in het previewvenster observeren met meethulpmiddelen om ervoor te zorgen dat elk ontwerpelement op de juiste positie staat.

De editor komt ook met de code-aanvulling, maar het is een beetje buggy, dus ik zou zeggen dat het een semi-code is. Anders is de hele editor leuk om te gebruiken, behalve het feit dat de editor behoorlijk verouderd is in termen van browsertype Defnition-ondersteuning, omdat het alleen maar ondersteunt tot de stijldefinitie van IE6.

9. Stylesheet Maker

Compatibiliteit: ramenOpmerkelijke functie: CSS-tags

Stylesheet Maker is nog een andere standaard CSS-editor die een schoon codeeroppervlak biedt met het deelvenster Bestandsverkenner en enkele handige CSS-hulpmiddelen voor het instellen van lettertype, kleur, marge, rand, enzovoort.

In vergelijking met verschillende CSS-editors zoals Snelle CSS of Style Studio, Maker heeft minder feature en toch erg schone interface, en dit is goed voor bepaalde beginners die dingen niet ingewikkeld willen maken, of CSS ninja die alles minimaal en comfortabel wil hebben.

Hoewel deze editor is ontworpen voor een gemiddelde gebruiker, kan de functie CSS-tags u helpen eenvoudig een CSS-regel met tags te maken op basis van klikken.

Het kost $ 34 om deze editor te bezitten, of je kunt het kopen met andere CoffeeCup-software als een bundelaankoop.

10. Arduo CSS

Compatibiliteit: ramenOpmerkelijke functie: Node, CSSTidy

Arduo CSS is een nieuw geboren CSS-editor die ernaar streeft u te plezieren met zijn intuïtieve en eenvoudig te gebruiken interface. Met zijn heldere interface en syntaxisaccentuering, kunt u gegarandeerd een CSS-bestand maken en bewerken zonder al te veel problemen en onderbrekingen. U kunt ook de functie 'Knooppunt' gebruiken om CSS-regels te definiëren op basis van punten en klikken.

Voor diegenen die vinden dat je stylesheet veel te zwaar is, kan de CSSTidy-tool van de editor je helpen om de stylesheet te optimaliseren en alle onnodige code weg te vagen.

De editor is gratis beschikbaar op zijn officiële site.

11. Eenvoudige CSS

Compatibiliteit: Windows, Mac OS XOpmerkelijke functie: Import van CSS-bestanden, Point-en-klik-interface, Extra font-database

Net zoals de naam heeft Simple CSS alles wat een ontwerper nodig heeft voor eenvoudige CSS-bewerking. U kunt een CSS-bestand importeren in de editor en het met een paar klikken aanpassen, het resultaat in het preview-venster bekijken en de broncode meteen verwijderen.

Hoewel u bijna elk CSS-bestand in de editor kunt importeren, kunt u slechts 1 CSS-regel tegelijk bekijken met een klik, en soms kan uw import een fout veroorzaken vanwege de beperking ervan, zoals geen ondersteuning voor @rules. Ook de editor zelf is niet zo flexibel, zoals je alleen 'Auto' of 'Inherit' kunt selecteren voor z-indexeigenschappen, maar de eigenschap niet direct een waarde geeft.

Niettemin is het gratis en best handig voor een ontwerper die een snelle oplossing nodig heeft.

Bonus: meer editors en hulpmiddelen

Hoewel het niet precies CSS-editors zijn, zijn deze volgende gereedschappen iets dat u zou willen hebben als het gaat om het bewerken van CSS.

Firebug

De meest populaire en krachtige webontwikkelingstool die HTML inspecteert, CSS-stijl wijzigt en de wijzigingen in realtime ziet, beschikbaar als plug-in voor Firefox-webbrowser.

CSS-gebruik

Een extensie voor Firebug waarmee u meerdere pagina's van uw site kunt scannen om te zien welke CSS-regels daadwerkelijk worden gebruikt op uw site.

Webontwikkelaar

Een Firefox-extensie waarmee u veel leuke dingen kunt doen, zoals CSS-bronnen weergeven of bepaalde CSS-stylesheets uitschakelen voor ontwerp of ontwikkelingsdoeleinden.

blocnote++

Een gratis broncode-editor en Kladblok-vervanging die verschillende talen ondersteunt, inclusief CSS. Bevat functies zoals functie-aanvulling om u te helpen bij het bouwen van uw CSS-ontwerp.

koda

Een geavanceerde teksteditor met ingebouwde CSS-editor die u twee CSS-bewerkingsmodi biedt voor een flexibelere ontwerpervaring, in staat om het resultaat direct te zien na aangebrachte wijzigingen.

NetBeans IDE

Een open-source en professionele geïntegreerde ontwikkelomgeving met de meest complete CSS-referentie in de code-aanvulfunctie.

Aptana Studio

Een complete webontwikkelomgeving die krachtige authoringtools voor HTML, CSS en JavaScript combineert, ondersteunt op dit moment tot HTML5 en CSS3.

WebStorm

De IDE van JetBrain die relevante automatische aanvulling implementeert voor alles inclusief CSS, ook kun je on-the-fly worden geïnformeerd over CSS-problemen.