Share
We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.
Het is gemakkelijk om vast te lopen met de CSS-technieken die we goed kennen, maar dit doet ons een nadeel wanneer nieuwe problemen opduiken.
Naarmate het internet blijft groeien, zal de vraag naar nieuwe oplossingen ook blijven groeien. Daarom hebben we als webdesigners en frontend-ontwikkelaars geen andere keuze dan onze toolset te kennen en het goed te kennen.
Dat betekent dat zelfs de speciale hulpmiddelen bekend zijn - degene die niet zo vaak worden gebruikt, maar wanneer ze nodig zijn, zijn precies de juiste tool voor het werk.
Vandaag ga ik je kennis laten maken met enkele CSS-tools die je misschien nog niet eerder kende. Deze hulpmiddelen zijn elk meeteenheden, zoals pixels of ems, maar het is heel goed mogelijk dat u er nog nooit van hebt gehoord! Laten we erin duiken.
We beginnen met iets dat lijkt op iets dat je waarschijnlijk al kent. De em eenheid wordt gedefinieerd als de huidige lettertypegrootte. Dus als u bijvoorbeeld een lettergrootte instelt op het hoofdelement, de em de waarde van elk kindelement in het lichaam is gelijk aan die lettergrootte.
Test
body font-size: 14px; div font-size: 1.2em; // berekend op 14px * 1.2 of 16.8px
Hier hebben we gezegd dat de div een heeft lettertypegrootte van 1.2em. Dat is 1,2 keer, ongeacht de lettergrootte die het heeft geërfd, in dit geval 14px. Het resultaat is 16.8px.
Wat gebeurt er echter als u de door u gedefinieerde lettergroottes in elkaar laat overlopen? In het volgende fragment passen we exact dezelfde CSS toe als hierboven. Elke div neemt de lettergrootte van het bovenliggende element over en geeft ons geleidelijk toenemende lettertypegroottes.
TestTestTest
Hoewel dit in sommige gevallen gewenst is, kunt u vaak eenvoudigweg vertrouwen op een enkele statistiek om tegen op te schalen. In dit geval zou u moeten gebruiken rem. De "r" in rem staat voor "root"; dit is gelijk aan de lettergrootte die is ingesteld op het rootelement; in de meeste gevallen is dat de html element.
html font-size: 14px; div font-size: 1.2rem;
In alle drie van de geneste divs in het vorige voorbeeld, zou het lettertype worden geëvalueerd 16.8px.
Rems zijn niet alleen handig voor lettertypen. U kunt bijvoorbeeld een volledig rastersysteem of een UI-stijlbibliotheek baseren op de HTML-lettertypegrootte van de hoofdmap rem, en gebruik schalen van em op specifieke plaatsen. Dit zou u meer voorspelbare lettergrootte en grootte geven.
.container width: 70rem; // 70 * 14px = 980px
Conceptueel is het idee achter een dergelijke strategie om uw interface te laten opschalen met de grootte van uw inhoud. Het hoeft echter niet per se voor elk geval het meest logisch te zijn.
Feature: rem (root em) -eenheden op caniuse.com
Responsieve webontwerptechnieken zijn sterk afhankelijk van percentageregels. CSS-percentage is echter niet altijd de beste oplossing voor elk probleem. CSS-breedte is relatief ten opzichte van het dichtstbijzijnde bevattende bovenliggende element. Wat als u de breedte of hoogte van het kijkvenster in plaats van de breedte van het bovenliggende element wilde gebruiken? Dat is precies wat de vh en vw eenheden bieden.
De vh element is gelijk aan 1/100 van de hoogte van de viewport. Bijvoorbeeld als de hoogte van de browser is 900px, 1vh zou evalueren naar 9px. Evenzo, als de breedte van de viewport is 750px, 1vw zou evalueren naar 7.5px.
Er zijn schijnbaar eindeloze toepassingen voor deze regels. Een eenvoudige manier om dia's op volledige hoogte of bijna op volledige hoogte te maken, kan bijvoorbeeld worden bereikt met een enkele CSS-regel:
.slide height: 100vh;
Stel je voor dat je een kop wilde die was ingesteld om de breedte van het scherm. Om dit te bereiken, zou je een lettergrootte instellen vw. Die grootte wordt geschaald met de breedte van de browser.
Functie: Viewport-eenheden: vw, vh op caniuse.com
Terwijl vh en vm zijn altijd gerelateerd aan de hoogte en breedte van het venster, Vmin en vmax zijn gerelateerd aan de maximum of minimum van die breedtes en hoogtes, afhankelijk van welke kleiner en groter is. Bijvoorbeeld, als de browser ingesteld was op 1100px breed en de 700px hoog, 1vmin zou 7px en 1vmax zou 11px zijn. Als de breedte echter is ingesteld op 800px en de hoogte is ingesteld op 1080px, Vmin zou wel even 8px zijn vmax zou worden ingesteld op 10.8px.
Dus, wanneer zou u deze waarden kunnen gebruiken?
Stel je voor dat je een element nodig hebt dat altijd zichtbaar is op het scherm. Een hoogte en breedte gebruiken ingesteld op a Vmin waarde onder de 100 zou dit mogelijk maken. Een vierkant element dat altijd ten minste twee zijden van het scherm raakt, kan bijvoorbeeld als volgt worden gedefinieerd:
.vak height: 100vmin; breedte: 100vmin;
Als je een vierkante doos nodig had die altijd covers de zichtbare viewport (door alle vier zijden van het scherm te allen tijde aan te raken), gebruik dezelfde regels behalve met vmax.
.vak height: 100vmax; breedte: 100vmax;
Combinaties van deze regels bieden een zeer flexibele manier om de grootte van uw viewport op nieuwe en opwindende manieren te gebruiken.
Functie: Viewport-eenheden: vmin, vmax op caniuse.com
De eenheden ex en ch, gelijkwaardig aan em en rem, vertrouw op het huidige lettertype en de lettergrootte. Echter, in tegenstelling tot em en rem, deze eenheden vertrouwen ook op de font-family, omdat ze worden bepaald op basis van lettertype-specifieke maatregelen.
De ch eenheid, of de karakter eenheid wordt gedefinieerd als zijnde de "geavanceerde maat" van de breedte van het nulteken, 0. Een aantal zeer interessante discussies over wat dit betekent kan worden gevonden op het blog van Eric Meyers, maar het basisconcept is dat, gezien een monospace-lettertype, een doos met een breedte van N tekeneenheden, zoals breedte: 40CH;, kan altijd een tekenreeks bevatten met 40 tekens in dat specifieke lettertype. Hoewel conventioneel gebruik van deze specifieke regel betrekking heeft op het maken van braille, gaan de mogelijkheden voor creativiteit hier zeker verder dan deze eenvoudige toepassingen.
De ex eenheid wordt gedefinieerd als de "x-hoogte van het huidige lettertype OF de helft van één em”. Dex-height van een bepaald lettertype is de hoogte van de kleine letter x van dat lettertype. Vaak is dit ongeveer op het middelste punt van het lettertype.
x-hoogte; de hoogte van de kleine letters x (lees meer over The Anatomy of Web Typography)Er zijn veel gebruikt voor dit soort eenheden, meestal voor typografische micro-aanpassingen. Bijvoorbeeld de sup element, wat staat voor superscript, kan omhoog worden geduwd in de lijn met behulp van relatieve positie en een onderste waarde van 1ex. Op dezelfde manier kunt u een subscript element naar beneden trekken. De browser standaard voor deze gebruiken superscript- en subscript-specifiek vertical-align regels, maar als je meer gedetailleerde controle wilde, zou je dit type explicieter als dit kunnen hanteren:
sup positie: relatief; onderaan: 1ex; sub positie: relatief; onderaan: -1ex;
De ex eenheid bestaat al sinds CSS1, hoewel je zulk een degelijke ondersteuning voor de ch eenheid. Raadpleeg voor meer informatie over ondersteuning CSS-eenheden en -waarden op het blog van Eric Meyer.
Het in de gaten houden van de voortdurende ontwikkeling en uitbreiding van CSS is ongelooflijk belangrijk, zodat u alle hulpmiddelen in uw toolset kent. Misschien zult u een bepaald probleem tegenkomen dat een onverwachte oplossing vereist met behulp van een van deze meer obscure meeteenheden. Neem de tijd om nieuwe specificaties te lezen. Meld u aan voor nieuwsupdates van geweldige bronnen zoals cssweekly. En vergeet niet, meld je nu aan voor wekelijkse updates, cursussen, gratis tutorials en bronnen zoals deze van Web Design on Tuts+!
Meer goeds voor CSS-eenheden.
Accentsconagua