Tidsbesparende CSS3-verktøy og generatorer

Mange av CSS3-spesifikasjonene er gjennomgått og presentert gjennom tidligere innlegg her i webutviklerbloggen, og å få dem implementert på tvers av alle enheter og nettlesere kan være en utfordring avhengig av hvilke stylingegenskaper som støttes. Ekstra prefikskoder hjelper, men å følge med spesifikasjonens adopsjonsfrekvens blant nettlesere kan bli en stor hodepine.

En av de enkleste måtene å hjelpe deg med å få og holde din CSS3-kode oppdatert med tilpasninger, er å bruke online-verktøy og auto-genererte kodeapplikasjoner som tar gjetting ut av utviklingsprosessen. I dette innlegget vil jeg fremheve og gjennomgå flere av verktøyene og generatorene som tilbyr store fordeler og hjelp for å holde CSS3 oppdatert og effektiv i de fleste moderne nettlesere.

CSS Selector's Test

CSS3 Selectors Test er ikke en kodegenerator, men er et flott verktøy for å kjøre et stort antall små tester for å finne ut om nettleseren din er kompatibel og støtter CSS-velgere som ikke er avhengig av brukerinteraksjoner. Selektortesten er en del av CSS3.Info, som viser seg alt "alt du trenger å vite om CSS3". Selektortesten ( figur A) er et godt utgangspunkt for å bestemme indikasjoner der visse nettlesere kanskje ikke støtter spesifikke CSS3-velgere.

En test i IE 8.0.6-nettleseren rapporterte 20 ikke-støttede velgere og 1 buggyvelger av førti-ene selektorer; av totalt 574 tester, besto 345, noe som tilsvarer en bestått score på 60%. En test i Firefox 7.0.1 rapporterte fra de 41 velgerne at 41 besto, 0 var buggy og 0 ble ikke støttet, og besto 574 av 574 tester for en 100% bestått poengsum. En siste test jeg kjørte i Chrome 15.0 rapporterte de samme resultatene som Firefox, som tilsvarte en 100% bestått poengsum.

Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator ( figur B tar kraften i HTML5 og CSS3 for å spesifisere graderinger med ren styling og uten behov for å lage tilpassede bilder, og disse CSS3-gradientene kan brukes gjentatte ganger for bakgrunner og gradienteffekter på nettstedene dine.

CSS Gradient Generator fungerer best på de nyeste versjonene av Firefox, Chrome, Safari, Opera eller IE. Generatoren har en import fra eksisterende CSS, mer enn 135 forhåndsinnstillinger for gradient, opacitetsstøtte med flere stopp, og import fra bilde som konverterer en bildegradient til CSS.

Jeg valgte forhåndsinnstillingen som heter "Blå til gjennomsiktig skarp" og endret deretter den vertikale retningen til diagonal fra øverst til venstre, til høyre, sjekket IE, holdt kommentarene sjekket og lagt til en sjekk for IE9-støtte, som genererte en gradientklasse sammen med en IE 9 overstyrer for å bli lagt til HTML og fullføre IE9-støtten. Gradientstoppene kan også justeres, sammen med glidebryterne for å justere fargetone, metning og lyshet. Et annet alternativ er tilgjengelig for valg av fargeformat som standard for rgba, men imidlertid er også fargeformatene heks, rgb, hsl og hsla gitt. Når du er ferdig, kan du koble til, lagre eller dele gjeldende gradient ved hjelp av den unike lenken, eller kopiere den genererte CSS og lime den inn i CSS-dokumentet. Jeg kopierte koden til teksteditoren min og måtte gjøre noen justeringer, da den automatisk genererte koden listet hver styling som bakgrunn: Jeg justerte dem til bakgrunnsbilde: og så fungerte alle stylingegenskapene.

Jeg importerte også et gradientbilde og opprettet CSS3 fra generatorverktøyet; Jeg måtte finpusse koden akkurat som jeg hadde gjort i den auto-genererte oppgaven tidligere for å få den til å fungere riktig. Utgangen for hver av de testede gradientene vises i Chrome 15.0 i figur C :

CSS3 vær så snill!

CSS3 vær så snill! Cross-Browser CSS3 regelgenerator ( figur D ) er et flott online verktøy for å gjøre inline endringer for å redigere CSS for mange stylingegenskaper. Flere av de tilgjengelige redigerbare stilene inkluderer kantradius, boksskygge, lineær gradient, rotering, bakgrunnsfarge, overgang, tekstskygge, animasjon, @ keyframes og mer. Online-applikasjonen av Paul Irish og Jonathan Neal er en felles innsats for å hjelpe nettutviklere med å lage nyttig tverrleser CSS3-kode i kort rekkefølge.

Jeg testet den elektroniske applikasjonen ved å bruke den første kodebiten, som er .round_box-stylingegenskapen ved hjelp av border-radius for å stille hjørnene. Jeg modifiserte standard 12px og økte den til 24px, og kopierte den til utklippstavlen min. Så la jeg til noen få tillegg til grensestil og farge, og en definert høyde, og i løpet av bare noen få minutter hadde jeg laget denne enkle avrundede boksen som vist i Chrome 15.0 nedenfor.

Figur E

CSS Gen

CSS3Gen ( figur F ) lar deg enkelt generere nyttige utdrag av CSS3-kode og kopiere dem rett inn i webdokumentprosjektene dine. For eksempel, med dette verktøyet, er det ikke mer som prøver å huske hva syntaks er for grense-radius-regelen i en nettleser. De tre verktøyene som tilbys av CSS3Gen tar vare på alle leverandørprefikser for å lage grensradius, boksskygge og tekstskygge; Bare velg CSS3-elementet du vil bruke, stil det i nettleseren og lim det deretter inn i webdokumentet. Jeg testet boksskyggeverktøyet, og med direkte forhåndsvisning av flyet, kan du justere vinkelen, avstanden, uskarpheten, rgb og opaciteten til skyggen, med den resulterende CSS3 klar til å kopiere og lime på bare sekunder som vist på figur G.

Og når jeg kopieres inn i dokumentprosjektet mitt, er dette eksempelresultatet i Chrome 15.0:

Figur H

CSS3 Lekeplass

CSS3 Playground ( figur I ) av Mike Plate er et fantastisk online verktøy for å lage CSS3-kompatibel styling for CSS3-kolonner, gradientbakgrunner, transformasjoner, tekstskygger, radius og boksskygge og flere andre. Verktøyet gir en on-the -fly oppdateringsevne med live forhåndsvisning av hver endring sammen med stilene du kan bruke i HTML- og CSS-filene. Jeg ønsket å teste kolonnegeneratorverktøyet og fant det ganske enkelt å justere alle innstillingene ved hjelp av skyvekontrollene og manuell oppføring. I løpet av sekunder hadde jeg laget en stil med tre kolonner, 10px gap, 2px regel tykkelse og en varm oransje farge. Den resulterende utgangen vises i Firefox 7.0.1 i figur J nedenfor.

Og når stylingen brukes på eksempelet CSS og HTML-webdokumenter, resulterer det i figur K som vist i Chrome 15.0:

Når du koder og styler i CSS3 fra bunnen av, og det bare tar for lang tid, eller hvis du trenger å koble til en rask modifisering, er disse CSS3-verktøyene og kodegeneratorene online en tidsbesparende og kommer godt med når du er under knasende til få det til .

© Copyright 2020 | mobilegn.com