Holde CSS3-koden Markup Slim
Webutviklere kan spare mye tid ved å bruke mer sofistikert CSS3-syntaks. Brukere som besøker siden, forventer raskest mulig belastetid - noe som gjør det ditt ansvar å holde filstørrelsen nede. Det er mange shorthand triks med CSS og spesielt under den nye CSS3 modellen.
Jeg har satt sammen noen av disse ideene i veiledningen nedenfor. Vi bør også ta kontakt med andre områder som å redusere CSS-koden din. Det finnes verktøy i nettleseren for å hjelpe utviklere i stylingsprosessen, men du vil kombinere kortkoder med denne filstørrelsesreduksjonen for å effektivisere effektiviseringsprosessen på nettstedet ditt.
Grunnleggende tips om formatering
Før vi hopper inn i selve CSS-syntaksen, vil jeg gå over temaet til hvordan å skrive CSS. Hvis du er litt kjent med webdesign, har du sannsynligvis sett et stilark før, sannsynligvis mer enn en gang. Den første delen av hver kommando kalles velger. Dette retter seg mot typen av element som vil motta stilene som er lagt inn i de krøllete båndene, også kjent som eiendommer.
Inline Level
Med inline-stiler er hver eiendom skrevet etter hverandre med bare mellomrom for å skille dem. Denne metoden brukes best på selectors hvor du bare trenger et par egenskaper. Det sparer plass på siden, og rulle gjennom stilarket ditt blir mye raskere. Hvis du aldri har møtt inline CSS før, har jeg lagt til et lite eksempel under målretting av HTML-ankerkoblinger.
en farge: # 648cc8; font-weight: bold; a: svever farge: # 739cda; tekst-dekorasjon: ingen; a.alt color: # bd4949! viktig;
Blokknivå
På den annen side legges blokkeringsegenskaper inn i en linje per nøkkel / verdi-par og er ofte innrykket for raskere endringer når du skanner koden. Om lag 99% av renere stilarkene jeg bruker, bruker denne formateringen, og det har blitt en industristandard for mange designere. Hvis selgeren bruker mer enn 6 eller 7 egenskaper, er dette den beste formateringen som skal brukes.
Når du tar hensyn til de mange nye CSS3-egenskapene, innser du også hvor raskt stilarkene dine fyller opp. Og mange av disse egenskapene støtter nettleserspecifikke kopier som krever nesten dupliserte kodeoppføringer (som grenseradius). Du kan sjekke ut mitt eksempel på en blokkegenskap som er angitt under målretting av en prøvepakker div.
.pakke inn display: block; polstring: 6px 10px; bakgrunn: #FFF; grense-radius: 4px; -moz-grense-radius: 4px; -webkit-grense-radius: 4px; -grense-radius: 4px;
Verken måte å skrive CSS er spesielt bedre enn den andre. Til syvende og sist er det ditt valg som utvikler som du foretrekker, og selv dette vil i henhold til prosjektet du jobber med. Det er enda vanlig å finne CSS der designere har blandet seg begge sammen! Jeg føler det personlig “arbeider pågår” pleier å være enklere med blokkstiler siden jeg kontinuerlig undersøker stilarket for å gjøre endringer eller tillegg. Men for trafikk-tunge domener som minifiserer CSS-filen din, er den absolutt beste måten å gå.
Holde dem slanke
Ved å utnytte de mange kortkodene som er tilgjengelige i CSS3, kan du spare mye tid for utvikling. Redigering av HTML-elementer blir mye lettere når du forstår denne tidsbesparende lingo. Koden din vil dessuten virke mer renskåret og enklere å se på.
Den eneste ulempen er at ikke alle nettlesere støtter disse egenskapene. Det finnes løsninger for mange av de eksisterende problemene, for eksempel i Internet Explorer og Netscape. Heldigvis går nettverket alltid fremover, og ettersom CSS3 vokser i popularitet, vil vi utvilsomt oppleve en vekst i nettleserens kompatibilitet også.
RGBa Farge gjennomsiktighet / Opacity
Den nye RGBavaluen er ikke akkurat en CSS3 eiendom, men alfa gjennomsiktighet er bare spesifikt for CSS3. I stedet for de vanlige "Red Green Blue" -verdiene passerer du inn for farge du kan nå Inkluder et fjerde alternativ for farge gjennomsiktighet. På grunn av dette, er webutviklere ferdig med gjennomsiktige PNG'er nesten helt.
Den grunnleggende syntaksen krever en verdi fra 0-255 i de første tre (3) sporene og 0-1.0 i alfaposisjonen. Fargespekteret er spesifikt for hvor mye av hver fargetone (RGB) er synlig, med 0 er ingenting og 255 fullt.
/ ** syntaks ** / bakgrunn: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** eksempel ** / div bakgrunn: rgba (255, 255, 255, 0.3);
Kompatibilitet på tvers av nettleseren
En annen eiendom opasitet kan brukes under noen omstendigheter. Men dette vil påvirke hele HTML-elementet og det indre innholdet, ikke bare bakgrunnen som du så i mitt eksempel.
Dessverre støtter ikke Internet Explorer RGBa-fargeværdien fra og med ennå. Du bør vanligvis inkludere en tilbakekallingsegenskap med full ustabilitet for disse mindre vanlige nettleserne. Du setter opp dette med de samme verdiene, men unntatt den fjerde (opacity). Det ville se ut som noe rgba (255, 255, 255)
I tillegg kan Internet Explorer håndteres litt mer grasiøst gjennom conditionals. Du kan faktisk sjekke om nettleseren kjører IE og vise et proprietært Microsoft CSS-filter på kommando. Jeg har demonstrert dette i mitt eksempel under (Merk dette vil vises et sted i HTML-filen din):
CSS3 Border Radius
Jeg har lest noen forvirrende forumtråder om å skape avrundede grenser med CSS3 - ikke så mye på siden av hvordan det er gjort, men med nettleserstøtte, forvrenger webutviklere for den enkleste koden å slippe inn og fungere som forventet.
/ ** syntaks ** / border-radius: øverst til venstre øverst til høyre nederst til høyre nederst til venstre;
De border-radius Egenskapen deler lignende syntaks for å opprette en standardgrense, bortsett fra i dette tilfellet, målretter vi på boksens hjørner. Denne egenskapen vil faktisk akseptere 1 - 4 verdier, og de retter seg mot et annet oppsett av hjørner.
- 1 verdi: Alle fire hjørner er avrundet til samme verdi
- 2 verdier: Den første verdien gjelder for
øverst til venstreogNede til høyremens den andre verdien trefferøverst til høyreognede til venstre - 3 verdier: Gjelder først for
øverst til venstrehjørne, den andre er beggenede til venstre&øverst til høyremens den tredje og endelige verdien gjelderNede til høyre - 4 verdier: Alle 4 verdiene målretter hjørner i følgende rekkefølge: øverst til venstre, øverst til høyre, nederst til høyre, nederst til venstre
/ ** eksempel ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Så i koden ovenfor bruker vi border-radius å bruke en 4px avrundet effekt på alt unntatt Nede til høyre grense som får en 8px glatt kurve. Hvis du la merke til det, vil begge disse kodene faktisk bruke samme stil effekt.
Kompatibilitet på tvers av nettleseren
Nå er hovedproblemet det border-radius støttes bare innenfor noen få nettlesere. Internet Explorer 9 har nylig lagt til stor støtte, og Opera vil gjengi dette også. Men selv Opera har skapt sin egen eiendom med -o-border-radius målretter mot sin spesifikke nettlesermotor. Dess -moz-border-radius støttes av Firefox / Gecko programvare og -webkit-border-radius for Google Chrome / Safari.
Koden nedenfor er et eksempel på min bare-ben-mal for å lage runde hjørner med den største globale nettleserstøtten.
div border-radius: 4px 4px 8px 4px; -webkit-grense-radius: 4px 4px 8px 4px ;; -moz-grense-radius: 4px 4px 8px 4px; -grense-radius: 4px 4px 8px 4px;
Fancy en Drop Shadow?
Den andre virkelig fantastiske fasaden til CSS3 er støtten til eske og tekstskygger. Dette har vært et slikt problem for utviklere i fortiden siden bakgrunnsbilder var det eneste realistiske alternativet. Denne syntaksen følger faktisk en shorthand-rolle som er mye enklere enn de andre egenskapene vi har dekket. Det er vanskelig å huske riktig rekkefølge av nøkkelverdier i begynnelsen - men jo mer praksis du legger inn, desto lettere blir det.
Dessverre er Internet Explorer nok en gang den merkelige ut. Hver annen stor nettleser, inkludert Firefox, Google Chrome, Safari og Opera, støtter fullt ut text-shadow eiendom. Utviklere har forsøkt å bygge sin egen IE-støtte i, men er fortsatt svært begrensende. Den grunnleggende syntaksen er skrevet som følger:
/ ** syntaks ** / tekst-skygge: x-offset y-offset-fargestrålefarge; / ** eksempel ** / div tekst-skygge: 2px 2px 1px # 111;
X- og Y-kompensasjonen forteller nettleseren hvor langt over høyre og lav skyggen skal vises. Du kan bruke negative verdier for å plassere skyggen over og over til venstre. Men dette kommer av å se veldig vanskelig, så jeg anbefaler positive heltall. Også uskarpt-radiusverdien kan brukes til å glatte ut de stive kanter, hvis tekstskyggen virker unaturlig.
Denne syntaksen ser bare på grunnleggende notering når du oppretter en enkelt dråpeskyggingseffekt. Meget avanserte designere har studert for å skape flere skygger samtidig! Jeg refererer til dette kjempebra blogginnlegget fra april 2011, noe som går i stor detalj om påleggende tekstskygger. Hvis du har tid, skum gjennom innholdet bare for å få en ide om de mer avanserte funksjonene, og vær sikker på å bokmerke det som en fremtidig referanse!
Kompatibilitet på tvers av nettleseren
Den største motoren vi kjører inn i, er Internet Explorer. Til tider har Microsoft presset ut sin egen nettleserversjonsmotor som i beste fall har utført sub-par. Nå, selv med CSS3 som tar regjene i tekstskygger, er IE fortsatt bak. Det er en flott demo nettsted der du kan finne kode eksempler og tradisjonelle CSS betingede kommentarer.
I utgangspunktet ser du etter om nettleseren din bruker kjører, samsvarer med en hvilken som helst versjon av Internet Explorer 9 eller under. Deretter bruker vi MS-filtre vi kan bruke en skygge i ethvert tekstelement (ovenfor bruker vi et avsnitt).
Lette overganger
CSS3 overgang er den hotteste eiendommen på designmarkedet siden granny's flapjacks! Webdesignere har gjort slike oppstyr om rene CSS-overganger, selv om støtten hovedsakelig er begrenset til Webkit-nettlesere. Du kan selvfølgelig bruke sekundære egenskaper for Mozilla og Opera og slikt. Men shorthandnotasjonen er veldig fengslende, spesielt hvis du er imot JavaScript-animasjoner uansett grunn.
Først, la oss ta en titt på den opprinnelige overgangseiendommen. Dette vil kreve 4 verdier som du også kan bryte ned i egenskapene selv. De korresponderer med overgangen eiendom(hva er effekten), varighet(hvor lang tid å tegne det ut), timing-funksjon(endringer i fart over animasjonen), og utsette(antall sekunder å vente før du animerer).
/ ** syntaks ** / overgang: tidsbegrenset forsinkelse av eiendomsvarighet; / ** eksempel ** / img overgangseiendom: opacity; overgangsperiode: 2s; Overgangstidsfunksjon: Lette inn; Overgangsforsinkelse: 0,5s;
Du bør intuitivt forstå formålet med de fleste av disse egenskapene, bortsett fra muligens timingsfunksjonen. Selv om det er forvirrende først, animerer denne egenskapen bare overgangen din annerledes, slik at effekten vil starte langsommere, slutte tregere eller noe lignende.
W3 Skoler har en tidsfunksjon doc online som viser alle mulige verdier du kan prøve ut. Jeg finner hele tiden meg selv Googling for disse guider, men de gjør så gode bokmerker.
Kompatibilitet på tvers av nettleseren
La oss nå bringe full nettleserstøtte til spill. Som standard er overgangsegenskapen bare støttet av nyere versjoner av Safari. Likevel krever mange brukere fortsatt -webkit prefiks som også gjelder for Google Chrome og lignende gjengivelsesmotorer. Nedenfor er en “avsluttet” kodeblokkmal Jeg anbefaler å lagre og bruke hvis du trenger overgangsstøtte fra flertallet av nettlesere.
img overgang: opacity 2s let-in 1s; -webkit-overgang: opacity 2s let-in 1s; / * krom, safari, flokk * / -moz-overgang: opacity 2s let-in 1s; / * mozilla + gecko * / -o-overgang: opacity 2s let-in 1s; / * opera * /
Tekst-slag-effekter
Denne egenskapen er ikke stor, og du vil ikke finne mange webdesignere som bruker det i dag. Men du kan bruke tekst-takts å bygge noen veldig fine effekter med skrifttyper. Webkit-nettlesere som Safari og Chrome er de eneste sanne støtterne til denne egenskapen så langt. Opera og Firefox har problemer med å gjengi tekstobjekter med de samme skissene.
/ ** syntaks ** / p -webkit-tekst-slag: breddefarge; / ** eksempel ** / p -webkit-tekst-slag: 1px # 222;
Kompatibilitet på tvers av nettleseren
Hvis du føler behov for tekststrekkseffekter, bør du alltid ta med en sikkerhetskopifarge. Mozilla og Opera kan komme forbi, men Internet Explorer-brukere har ingen andre alternativer. Dessverre er dette en av de nyere CSS3-egenskapene som nettopp ikke har fått nok støtte fra nettleserutviklerens fellesskap. Du bør tilbringe litt tid med å leke med dette flotte nettverktøyet som er spesielt opprettet for å bygge disse CSS3-tekstutskrifter.
Box-sizing
Den boksformede egenskapen gir deg mer kontroll over total bredde / høyde på et blokkelement. Som standard utgjør bredden / høyden + grensen + marginen + polstring den totale størrelsen på en boks. Men ved å bruke rammeboksen på innholdet ditt, skyves alle dine polstring og marginer innover for å holde bredden nøyaktig den samme. Det er bare to verdier for denne egenskapen, med Innholdet-box å være standard.
div bredde: 550px; polstring: 9px; boks-størrelse: border-box; / * Bredden forblir på 550px * /
Som du kan forestille deg, vil dette komme til nytte når som helst under CSS-karrieren din. Padding og margins kan være en ekte smerte, og når du legger til i grenser, har du en tendens til å miste oversikten over piksler.
Kompatibilitet på tvers av nettleseren
Opera og IE 8 støtter denne nye egenskapen som standard. IE7 og under sitter fast med innstillingene i innholdsruten, med mindre de besøkende bruker quirks-modus. De eneste tilleggene du bør vite om spesifikt målrettede webkit- og Mozilla-drevne nettlesere.
div -webkit-box-size: border-box; / * Safari / Chrome * / -moz-boks-størrelse: border-box; / * Firefox * / boks-størrelse: border-box; / * Opera / IE8 + * /
Pure CSS3 kolonner
Kolonner er litt vanskelig med CSS3, men kan oppnås med minimal kode. De 2 egenskapene du vil fokusere på er kolonne-count og kolonne-gap. Tallet refererer til totalt antall kolonner du ønsker å søke mens gapet skaper en margin mellom hver enkelt.
div # cols kolonne-telling: 3; kolonneavstand: 10px;
I mitt eksempel kan vi se ID # cols som brukes som en container. Innsiden deler vi div i 3 kolonner med 10 px mellomrom. Videre kan du sette kolonnebredde som brukes til å angi total bredde for hver kolonne i stedet for å oppgi et solidt nummer.
Kompatibilitet på tvers av nettleseren
Alt før IE8 vil ganske enkelt ikke kunne benytte seg av denne eiendommen. Men som vi har sett i hvert eksempel, tilbyr Mozilla og Webkit sine egne løsninger for flere nettlesere. Hvis du trenger en mal, sjekk ut min lille eksempelkode nedenfor:
div # sidebar bredde: 210px; -moz-kolonne-telling: 3; -moz-kolonne-gapet: 7px; -webkit-kolonne-telling: 3; -webkit-kolonne-gap: 7px; kolonne telling: 3; kolonneavstand: 7px;
Egendefinert @ font-ansikt
Du må ha hørt om spenningen angående CSS3 tilpassede skrifttyper. Vel ved bruk av @ font-face-eiendommen kan vi importere eksterne skriftstiler og bruke disse akkurat som alle andre familiemedlemmer. Syntaxen er litt innviklet, og du må bruke litt tid på å få det riktig. Blokken for @ Font-face brukes til å definere et etternavn, etterpå kan du bruke dette i din font-family eiendommer hvor!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Bare Internet Explorer * / Så du ser over, jeg målretter ikke mot noen bestemt skrifttype, men syntaxen er hva som skal skille seg ut. Legg merke til at Internet Explorer bare støtter .EOT skrifttyper, mens .tTF og .OTF er populære alternativer for de andre nettleserne. Også av betydning, bør du forstå at du kan passere i skrifttype nettadresser fra direkte koblinger, dvs.. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Det er ikke noe ekte kryssbrowserproblem med dette oppsettet, siden alle gjengivelsesmotorer kan analysere disse skriftfiltypene. Bare husk at for IE-støtte må du inkludere en eot-versjon så vel som originalen din. Jeg føler at W3 Schools-artikkelen har en katalog over den viktigste informasjonen du bør sjekke ut.
Konvertere til Miniature CSS
Dette emnet diskuteres ofte, da det tjener et annet formål for hvert prosjekt. På den ene siden bruker webutviklere mye tid på å skrive sine stilark. Det er ingen måte å kryptere denne typen plaintext-data og skjule den fra snooping-øyne. Hvis du prøver å hindre andre i å stjele koden din, er det best du kan gjøre, å rote opp stilene og fjerne alle linjeskift / mellomrom.
Denne prosessen kan merkes som miniaturizing koden din. Generelt vil utviklere skrive CSS i standardformat og deretter fjerne alle hvite plasser før opplasting til webserveren. Deretter har du en lokal kopi som du kan redigere raskt, samtidig som du gir en mindre versjon på live-prosjektet. Denne metoden kan åpenbart være nyttig for å redusere sidebelastninger sammen med å holde kodekapere i sjakk.
Lenken jeg postet over som fører til Minify CSS, har noen kjempebra lesemateriell om emnet. Nettstedet gir også et nettleserbasert verktøy for fjerning av slike hvite plasser og viktige avkastninger fra koden din. CSS Compressor er et annet alternativ med et enkelt grensesnitt som kjører direkte i nettleseren din. Jeg har også hørt gode ting om Clean CSS, selv om jeg aldri har brukt appen selv.
Relaterte linker
For å holde deg presset frem har jeg gitt seks nyttige lenker fra hele verden. Disse inkluderer ikke bare shorthand notasjon, men nyttige guider og opplæringsprogrammer å få tilgang til når du praktiserer denne nye shorthand CSS-koden.
- Begynnerveiledning til CSS3
- CSS Shorthand Guide
- Bruker du CSS3 på riktig måte?
- CSS innhold og nettleser kompatibilitet diagram
- CSS3 + Progressiv forbedring = Smart design
- Komplett CSS / CSS3 Properties Index
Konklusjon
Det tar mye engasjement og praksis å skrive CSS kode for å bygge en konkret tidsplan som du kan følge for hvert prosjekt. De fleste webdesignere er glade for å hente nye prosjekter og ideer, så du vil sikkert finne tid til å praktisere disse nyttige kodingstipsene. Prøv å kopiere ned et lite referanseark for din egen bekvemmelighet, hvis du ikke finner noen lurer, eller enda verre, mister du Internett-tilkobling!
Kjenner du til andre nyttige CSS3 egenskaper eller snarveier? Vi vil gjerne høre dine tanker og ideer i diskusjonsmerkene. Webutviklere presser på for mer standardisering i W3C, og overgangen har tydeligvis blitt enklere. CSS3 gir fantastiske fordeler, og hvis du kan mestre shorthand-koding, vil dette holde filstørrelsen lav og avskrekke copycats fra å stjele koden din.
