Uw CSS3-codemarkering slim houden

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Webontwikkelaars kunnen veel tijd besparen met behulp van de meer geavanceerde CSS3-syntaxis. Gebruikers die uw pagina bezoeken, verwachten de snelst mogelijke laadtijd - waardoor het uw verantwoordelijkheid is om de bestandsgroottes laag te houden. Er zijn genoeg steno-trucs met CSS en vooral onder het nieuwe CSS3-model.

Ik heb enkele van deze ideeën in de onderstaande gids samengevat. We moeten ook andere gebieden bespreken, zoals het verkleinen van uw CSS-code. Er zijn in-browser tools beschikbaar om ontwikkelaars te helpen bij het stylingsproces, maar je wilt shortcodes combineren met deze bestandsreductie om uiteindelijk het weergaveproces van je website te stroomlijnen.

Basistips voor formatteren

Voordat we ingaan op de daadwerkelijke CSS-syntaxis, wil ik het onderwerp bespreken hoe om je CSS te schrijven. Als u enigszins bekend bent met webontwerp, heeft u waarschijnlijk eerder een stylesheet gezien, waarschijnlijk meer dan eens. Het eerste deel van elke opdracht wordt de keuzeschakelaar. Dit is gericht op het type element dat de stijlen krijgt die zijn toegevoegd binnen de accolades, ook wel bekend als eigenschappen.

Inlineniveau

Bij inline-stijlen wordt elke eigenschap achter elkaar geschreven met alleen spaties om ze te scheiden. Deze methode wordt het best toegepast op selectors waar je maar een paar eigenschappen nodig hebt. Het bespaart u ruimte op de pagina en het scrollen door uw stylesheet zal veel sneller gaan. In het geval dat u nog nooit inline CSS bent tegengekomen, heb ik een klein voorbeeld toegevoegd onder HTML-ankerlinks op targeting.

een color: # 648cc8; lettertype: vet;  a: hover color: # 739cda; tekstdecoratie: geen;  a.alt color: # bd4949! important;

Blokkeer niveau

Aan de andere kant worden blokstijleigenschappen in één regel ingevoerd per sleutel / waarde-paar en worden vaak ingesprongen voor snellere bewerkingen bij het scannen van de code. Ongeveer 99% van de schonere stylesheets die ik tegenkom gebruik deze opmaak en het is een industriestandaard voor veel ontwerpers geworden. Als uw selector meer dan 6 of 7 eigenschappen gebruikt, is dit de beste opmaak om toe te passen.

Wanneer u rekening houdt met de vele nieuwe CSS3-eigenschappen, beseft u ook hoe snel uw stylesheets vol raken. En veel van deze eigenschappen ondersteunen browser-specifieke kopieën die bijna dubbele code-invoer vereisen (zoals grensradius). U kunt mijn voorbeeld van een blokeigenschapset hieronder bekijken, gericht op een voorbeeld-wrapper-div.

.wrap display: block; opvulling: 6px 10px; achtergrond: #FFF; grensradius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;

Geen enkele manier om CSS te schrijven is specifiek beter dan de andere. Uiteindelijk is het jouw keuze als ontwikkelaar naar welke stijl je de voorkeur geeft, en zelfs dit zal volgens het project waar je aan werkt. Het is zelfs gebruikelijk om CSS te vinden waar ontwerpers beide samen hebben gemengd! Ik voel dat persoonlijk “werk in uitvoering” is meestal eenvoudiger met blokstijlen, omdat ik het stylesheet voortdurend aan het onderzoeken ben om bewerkingen of toevoegingen te maken. Maar voor verkeer-zware domeinen is het verkleinen van je CSS-bestand de absoluut beste manier om te gaan.

Houd ze slim

Door gebruik te maken van de vele korte codes die beschikbaar zijn in CSS3, kunt u veel ontwikkeltijd besparen. Het bewerken van HTML-elementen zal een stuk eenvoudiger worden naarmate u dit tijdbesparende jargon begrijpt. Bovendien zal uw code overzichtelijker en gemakkelijker te bekijken zijn.

Het enige nadeel is dat niet alle browsers deze eigenschappen volledig ondersteunen. Er zijn oplossingen voor veel van de bestaande problemen, zoals in Internet Explorer en Netscape. Gelukkig evolueert het Web steeds verder en naarmate CSS3 in populariteit groeit, zullen we ongetwijfeld ook een groei in browsercompatibiliteit ervaren.

RGBa Kleur Transparantie / Dekking

De nieuwe RGBavalue is niet bepaald een CSS3 eigendom, maar alpha-transparantie is alleen specifiek voor CSS3. In plaats van de gebruikelijke "Rood-groene" waarden die u doorgeeft voor kleur die u nu mag gebruiken een vierde optie voor kleurtransparantie bevatten. Vanwege dit, web-ontwikkelaars zijn bijna klaar met transparante PNG's.

De basissyntaxis vereist een waarde van 0-255 in de eerste drie (3) slots en 0-1.0 in de alpha-positie. Het kleurbereik is specifiek voor hoeveel van elke tint (RGB) zichtbaar is, waarbij 0 niets is en 255 vol.

 / ** syntaxis ** / achtergrond: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** voorbeeld ** / div background: rgba (255, 255, 255, 0.3);

Compatibiliteit tussen browsers

Een andere eigenschap ondoorzichtigheid kan in sommige omstandigheden worden gebruikt. Dit zal echter het hele HTML-element en de innerlijke inhoud beïnvloeden, niet alleen de achtergrond zoals je in mijn voorbeeld hebt gezien.

Helaas ondersteunt Internet Explorer tot nu toe de RGBa-kleurwaarde niet. Over het algemeen dient u een fallback-eigenschap met volledige dekking voor deze minder standaard browsers op te nemen. Je hebt dit ingesteld met dezelfde waarden maar exclusief de vierde (dekking). Het zou er ongeveer zo uitzien rgba (255, 255, 255)

Bovendien kan Internet Explorer een beetje gracieuzer worden behandeld via conditionals. U kunt ook controleren of de browser IE gebruikt en een eigen Microsoft CSS-filter weergeven op commando. Ik heb dit in mijn onderstaande voorbeeld aangetoond (merk op dat dit ergens in uw HTML-bestand staat):

CSS3 Grensradius

Ik heb een paar verwarrende forumthreads gelezen over het maken van afgeronde randen met CSS3 - niet zozeer aan de kant van hoe het werkt, maar met behulpzame browserondersteuning zijn webontwikkelaars bezig met het zoeken naar de gemakkelijkste code die binnenkomt en naar verwachting functioneert.

 / ** syntaxis ** / grensradius: linksboven rechtsonder rechtsonder linksonder;

De border-radius property heeft dezelfde syntaxis als het maken van een standaardrand, behalve dat in dit geval we de vakhoeken targeten. Deze eigenschap accepteert feitelijk 1 - 4 waarden en ze zijn allemaal gericht op een andere opstelling van hoeken.

1 waarde: Alle vier hoeken zijn afgerond op dezelfde waarde
2 waarden: De eerste waarde is van toepassing op linksboven en rechts onder terwijl de tweede waarde treft rechtsboven en linksonder
3 waarden: Eerst van toepassing op de linksboven hoek, de tweede is beide linksonder & rechtsboven terwijl de derde en laatste waarde wordt toegepast op rechts onder
4 waarden: Alle 4 waarden targeten hoeken in de volgende volgorde: linksboven, rechtsboven, rechtsonder, linksonder

 / ** voorbeeld ** / div border-radius: 4px 4px 8px 4px;  div border-radius: 4px 4px 8px;

Dus in de code hierboven gebruiken we border-radius om een 4px afgerond effect toe te passen op alles behalve de rechts onder rand die een 8px afgevlakte curve krijgt. Als je het merkt, zullen beide codes feitelijk hetzelfde stijleffect toepassen.

Compatibiliteit tussen browsers

Nu is het grootste probleem dat border-radius wordt alleen ondersteund binnen een paar browsers. Internet Explorer 9 heeft onlangs geweldige ondersteuning toegevoegd en Opera zal dit ook uitvoeren. Maar zelfs Opera heeft zijn eigen eigendom gemaakt met -o-border-radius gericht op hun specifieke browser-engine. Daarnaast -moz-border-radius wordt ondersteund door de Firefox / Gecko-software en -webkit-border-radius voor Google Chrome / Safari.

De onderstaande code is een voorbeeld van mijn bare-bone-sjabloon voor het maken van afgeronde hoeken met de grootste wereldwijde browserondersteuning.

 div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;

Zin in een slagschaduw?

Het andere echt geweldige facet van CSS3 is de ondersteuning voor doos en tekstschaduwen. Dit was zo'n probleem voor ontwikkelaars in het verleden, omdat achtergrondafbeeldingen de enige realistische optie waren. Deze syntaxis volgt eigenlijk een afkorting van een rol die veel eenvoudiger is dan de andere eigenschappen die we hebben behandeld. Het is moeilijk om eerst de juiste volgorde van de belangrijkste waarden te onthouden, maar hoe meer oefening je aanbrengt, hoe makkelijker het wordt.

Helaas is Internet Explorer opnieuw een vreemde eend in de bijt. Elke andere grote browser inclusief Firefox, Google Chrome, Safari en Opera ondersteunt volledig de schaduw tekst eigendom. Ontwikkelaars hebben geprobeerd hun eigen IE-ondersteuning in te bouwen, maar dit is nog steeds erg beperkt. De basissyntaxis is als volgt geschreven:

 / ** syntaxis ** / tekstschaduw: x-offset y-offset blur-radius kleur; / ** voorbeeld ** / div text-shadow: 2px 2px 1px # 111;

De X- en Y-offset vertellen de browser hoe ver over rechts en laag de schaduw zou moeten verschijnen. U kunt negatieve waarden gebruiken om de schaduw respectievelijk links en links te positioneren. Maar dit komt er heel vreemd uit, dus ik adviseer positieve gehele getallen. U kunt ook de waarde voor onscherpte gebruiken om de stijve randen glad te strijken als de tekstschaduw onnatuurlijk lijkt.

Deze syntaxis bekijkt gewoon de basisnotatie bij het maken van een enkel slagschaduweffect. Zeer geavanceerde ontwerpers hebben gestudeerd om zelfs meerdere schaduwen tegelijk te maken! Ik verwijs naar deze geweldige blogpost van april 2011 die gedetailleerd ingaat op het opleggen van tekstschaduwen. Als u tijd heeft, bladert u door de inhoud om een idee te krijgen van de geavanceerdere functies, en vergeet niet deze als referentie voor de toekomst te markeren.!

Compatibiliteit tussen browsers

De grootste bedreiging die we tegenkomen is Internet Explorer. Keer op keer heeft Microsoft hun eigen browser-rendering-engine uitgezet die op zijn best ondermaats presteerde. Nu zelfs met CSS3 de regeerperiode op tekstschaduwen, is IE nog steeds achter. Er is een geweldige demowebsite waar u codevoorbeelden en traditionele CSS-voorwaardelijke opmerkingen kunt vinden.

In principe wilt u controleren of de browser die uw gebruiker gebruikt overeenkomt met een versie van Internet Explorer 9 of lager. Met behulp van MS-filters kunnen we een schaduw toepassen op elk willekeurig tekstelement (hierboven gebruiken we een alinea).

Veranderende overgangen

CSS3 overgang is de heetste eigenschap op de ontwerpmarkt sinds oma's flapjacks! Webontwerpers hebben zich zo druk gemaakt over pure CSS-overgangen, hoewel de ondersteuning hoofdzakelijk beperkt is tot Webkit-browsers. Je kunt natuurlijk secundaire eigenschappen gebruiken voor Mozilla en Opera en dergelijke. Maar de steno-notatie is echt boeiend, vooral als je om wat voor reden dan ook tegen JavaScript-animaties bent.

Laten we eerst de oorspronkelijke overgangseigenschap bekijken. Dit vereist 4 waarden die u zelf ook in eigenschappen kunt opsplitsen. Ze komen overeen met de overgang eigendom(wat is het effect), looptijd(hoe lang uit te tekenen), timing-functies(veranderingen in snelheid tijdens de animatie), en vertraging(aantal seconden dat moet worden gewacht voordat wordt geanimeerd).

/ ** syntaxis ** / overgang: vertragingsfunctie-functie vertragingstijd; / ** example ** / img transition-property: opacity; overgangsduur: 2s; overgang-timing-functie: gemak-in; overgangsvertraging: 0,5s;

U moet intuïtief het doel van de meeste van deze eigenschappen begrijpen, behalve misschien de timingfunctie. Hoewel het in eerste instantie verwarrend is, bezielt deze eigenschap eenvoudigweg je overgang anders, zodat het effect trager wordt, trager eindigt of iets dergelijks.

W3 Schools heeft online een tijdfunctiefunctie met alle mogelijke waarden die u kunt uitproberen. Ik merk dat ik voortdurend Googlen naar deze gidsen, maar ze maken zulke handige bladwijzers.

Compatibiliteit tussen browsers

Laten we nu de volledige browserondersteuning in het spel brengen. Standaard is de overgangseigenschap enkel en alleen ondersteund door nieuwere versies van Safari. Toch hebben veel gebruikers nog steeds de -webkit voorvoegsel dat ook van toepassing is op Google Chrome en vergelijkbare rendering engines. Hieronder staat een “afgerond” codebloksjabloon Ik raad aan te bewaren en te gebruiken als u overgangsondersteuning van de meeste webbrowsers nodig hebt.

 img transition: opacity 2s ease-in 1s; -webkit-overgang: opacity 2s ease-in 1s; / * chrome, safari, flock * / -moz-transition: opacity 2s ease-in 1s; / * mozilla + gecko * / -o-transition: opacity 2s ease-in 1s; / * opera * /

Tekststreep-effecten

Deze eigenschap is niet enorm en je zult niet veel webontwerpers vinden die het vandaag gebruiken. Maar je kunt gebruiken text-stroke om heel leuke effecten met je lettertypen te maken. Webkit-browsers zoals Safari en Chrome zijn tot nu toe de enige echte supporters van dit eigendom. Opera en Firefox hebben moeite met het renderen van tekstobjecten met dezelfde contouren.

 / ** syntaxis ** / p -webkit-tekst-streek: breedte kleur;  / ** voorbeeld ** / p -webkit-tekst-streek: 1px # 222;

Compatibiliteit tussen browsers

Als u behoefte hebt aan tekststreep-effecten, moet u altijd een back-upkleur opnemen. Mozilla en Opera kunnen zich redden, maar gebruikers van Internet Explorer hebben geen andere opties. Helaas is dit een van de nieuwere CSS3-eigenschappen die nog maar net onvoldoende ondersteuning heeft gekregen van de ontwikkelaarscommunity van de webbrowser. Je zou wat tijd moeten besteden aan het spelen met deze geweldige webtool die speciaal is gemaakt voor het bouwen van deze CSS3-tekstcontouren.

Box-sizing

De eigenschap voor het sorteren van de box geeft u meer controle over de totale breedte / hoogte van elk blokelement. Standaard vormen de breedte / hoogte + rand + marge + opvulling de totale grootte van een vak. Het gebruik van border-box op uw inhoud duwt echter al uw vulling en marges binnenwaarts om de breedte exact hetzelfde te houden. Er zijn slechts twee waarden voor deze eigenschap, met Inhoud-box als de standaard.

div width: 550px; opvulling: 9px; box-sizing: border-box; / * breedte blijft op 550px * /

Je kunt je voorstellen dat dit op enig moment van pas zal komen tijdens je CSS-carrière. Opvulling en marges kunnen een echte pijn zijn en wanneer u randen toevoegt, bent u geneigd om de pixels uit het oog te verliezen.

Compatibiliteit tussen browsers

Opera en IE 8 ondersteunen standaard deze nieuwe eigenschap. IE7 en lager zitten vast met de instelling van het inhoudsvak, tenzij uw bezoekers de modus Quirks gebruiken. De enige toevoegingen die u moet weten, zijn specifiek gericht op webkit en Mozilla-aangedreven browsermotoren.

div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /

Pure CSS3-kolommen

Kolommen zijn een beetje lastig met CSS3 maar kunnen worden bereikt met minimale code. De 2 eigenschappen waarop u zich wilt concentreren, zijn column-count en kolom-gap. De telling verwijst naar het totale aantal kolommen dat u wilt toepassen, terwijl het verschil een marge creëert tussen elke kolom.

 div # cols column-count: 3; kolomruimte: 10px;

In mijn voorbeeld zien we de ID #cols worden gebruikt als een container. Binnen deelden we de div in 3 kolommen met een opening van 10 px tussen elke kolom. Verder zou je kunnen stellen kolombreedte die wordt gebruikt om de totale breedte van elke kolom in te stellen in plaats van een vast getal op te sommen.

Compatibiliteit tussen browsers

Alles voor IE8 kan eenvoudigweg geen gebruik maken van deze eigenschap. Maar zoals we in elk voorbeeld hebben gezien, bieden Mozilla en Webkit hun eigen oplossingen voor meerdere browsers. Als je een sjabloon nodig hebt, bekijk dan mijn kleine voorbeeldcode hieronder:

 div # zijbalk width: 210px; -moz-kolom-telling: 3; -moz-column-gap: 7px; -webkit-kolom-telling: 3; -webkit-column-gap: 7px; kolom aantal: 3; kolomafstand: 7px;

Aangepast @ font-face

U moet wel eens hebben gehoord van de opwinding met betrekking tot aangepaste CSS3-lettertypen. Met behulp van de eigenschap @ font-face kunnen we externe lettertypestijlen importeren en deze net als elke andere familie gebruiken. De syntaxis is enigszins ingewikkeld en je zult enige tijd moeten besteden aan het goed doen. Het blok voor @ Font-face wordt gebruikt om een familienaam te definiëren, achteraf kunt u dit gebruiken in uw font-family eigenschappen waar dan ook!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Alleen Internet Explorer * /

Dus je ziet hierboven dat ik me niet richt op een specifiek lettertype, maar de syntaxis is wat zou moeten opvallen. Merk op dat Internet Explorer alleen ondersteunt .EOT lettertypen, terwijl .ttf en .OTF zijn populaire opties voor de andere browsers. Ook van belang is dat u begrijpt dat u font-URL's van directe links kunt doorgeven, dat wil zeggen. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');

Er is geen echt probleem met andere browsers met deze set-up, omdat alle rendering-engines deze font-bestandstypen kunnen parseren. Onthoud dat voor IE-ondersteuning u zowel een eot-versie als uw origineel moet opnemen. Ik vind dat het artikel van W3 Schools een catalogus heeft met de belangrijkste informatie die je moet bekijken.

Converteren naar miniatuur CSS

Dit onderwerp wordt vaak besproken omdat het voor elk project een ander doel dient. Aan de ene kant besteden webontwikkelaars veel tijd aan het schrijven van hun stylesheets. Er is geen manier om dit type onbewerkte tekstgegevens te versleutelen en te verbergen voor nieuwsgierige ogen. Als je probeert te voorkomen dat anderen je code op een onbetrouwbare manier stelen, kun je het beste de stijlen opruimen en alle regeleinden / spaties verwijderen.

Dit proces kan worden geëtiketteerd als miniaturisering jouw code. Over het algemeen zullen ontwikkelaars de CSS in standaardformaat schrijven en vervolgens alle witruimte verwijderen voordat ze naar de webserver worden geüpload. Dan heb je een lokale kopie om snel te bewerken terwijl je ook een kleinere versie van het live project levert. Deze methode kan natuurlijk handig zijn om pagina-belastingen te verminderen en tegelijkertijd code-kapers op afstand te houden.

De link die ik hierboven heb geplaatst en leidt naar CSS verkleinen heeft een aantal geweldige leesmateriaal over het onderwerp. De site biedt ook een browsergebaseerd hulpmiddel voor het verwijderen van dergelijke witruimte en sleutelretours van uw code. CSS Compressor is een andere optie met een eenvoudige interface die rechtstreeks in uw webbrowser wordt uitgevoerd. Ik heb ook goede dingen gehoord over Clean CSS, hoewel ik de app zelf nooit heb gebruikt.

Gerelateerde Links

Om ervoor te zorgen dat je blijft groeien, heb ik zes handige links van het internet beschikbaar gesteld. Deze omvatten niet alleen steno-notatie maar nuttige handleidingen en tutorials om toegang te krijgen bij het oefenen van deze nieuwe steno-CSS-code.

Beginnershandleiding voor CSS3
CSS steno-handleiding
Gebruikt u CSS3 op de juiste manier?
CSS-inhoud en browsercompatibiliteitsgrafiek
CSS3 + Progressive Enhancement = Slim ontwerp
Voltooi CSS / CSS3 Properties Index

Conclusie

Het kost veel toewijding en oefening om CSS-code te schrijven om een concreet schema te maken dat u voor elk project kunt volgen. De meeste webontwerpers nemen graag nieuwe projecten en ideeën op, dus u zult zeker de tijd vinden om deze handige codeertips te oefenen. Probeer voor uw gemak een klein naslagwerk te kopiëren voor het geval u geen spiekbriefjes vindt, of erger nog, u verliest de internetverbinding!

Kent u andere handige CSS3-eigenschappen of snelkoppelingen? We horen graag uw gedachten en ideeën in de discussiecommentaren. Webontwikkelaars streven naar meer standaardisatie binnen het W3C en het is duidelijk dat de overgang eenvoudiger is geworden. CSS3 biedt fantastische voordelen en als je steno-codering onder de knie kunt krijgen, houdt dit je bestandsgroottes laag en wordt copycats er van weerhouden om je code te stelen.