Egy esettanulmány
Nemrégiben egy Twitter-közvélemény-kutatás lebegett, ahol a felhasználó kérdést tett fel követőinek a CSS specifikumával kapcsolatban. Sajnos nem sikerült megtalálni az eredeti tweetet (kommentáld alább, ha véletlenül megtalálod!), De rövid történet, az emberek többsége rosszul kapta a választ.
Ez a Twitter-közvélemény-kutatás (és annak következményei) arra késztették, hogy elmélyítsem a sajátosságomat a sajátossággal kapcsolatban, és ez arra késztetett, hogy saját projektjeimben elkezdjem kijavítani a sajátossággal kapcsolatos kérdéseket - ezzel eljutottam e bejegyzés céljához.
Ebben a bejegyzésben át fogjuk alakítani a CSS-kódot egy olyan projektemből, amelynek olyan CSS-specifitási problémái vannak, amelyek javításra szorulnak.
CSS specifitás
Meghatározás
A specifikusságot az MDN Web Docs a következőképpen írja le:
az az eszköz, amellyel a böngészők eldönthetik, hogy mely CSS tulajdonságértékek a legrelevánsabbak egy elem számára, ezért alkalmazhatók.Szabályok
Annak eldöntésekor, hogy mely CSS tulajdonságértékek a legrelevánsabbak egy elemre, a böngésző ennek meghatározásához a CSS stíluslap forrás sorrendjét (azaz kaszkádját) használja. De ez a szabály akkor érvényes, ha a CSS-szelektorok specifikussága azonos. Mi történik, ha az egyik CSS-választó specifitása magasabb, mint a másik?
Ebben az esetben a böngészők a CSS-választó sajátosságait használják annak meghatározására, hogy mely CSS-utasításokat kell alkalmazni. Minél magasabb a CSS-választó specifikussága, annál valószínűbb, hogy a böngészők egy másikra alkalmazzák a CSS-deklarációit.
nav a { color: green; } a { color: red; }Például a fenti példában mindkét CSS választó ugyanazt a HTML elemet, a horgonycímkét célozza. Annak eldöntése érdekében, hogy melyik CSS-szabályt kell alkalmazni a horgonycímkére, a böngésző kiszámítja a specificitás értékét és ellenőrzi, hogy melyik a legmagasabb. Ebben az esetben az első választó magasabb specifitási értékkel rendelkezik, ezért a böngésző a deklarációit használja a horgonycímkére.
Szeretném itt kiemelni, hogy bár a ! Fontos nem CSS-választó, ez egy olyan kulcsszó, amelyet a CSS-szabály erőteljes felülírására használnak, függetlenül a CSS-választó specifikusságától, eredetétől vagy forrás sorrendjétől. Néhány felhasználási eset a következőket tartalmazza:
- Ideiglenes javítások (kicsit olyan, mintha ragasztószalagot raknának egy szivárgó csőre)
- Elsőbbségi beillesztett stílus
- Tesztelési / hibakeresési célok
Bármennyire is hasznosnak tűnik a ! Fontos kulcsszó használata, annak használata problémásabb, mint hasznos lehet. Idővel megnehezítheti a CSS karbantartását, és negatívan befolyásolhatja a stíluslap olvashatóságát, különösen bárki más számára, aki a jövőben dolgozik vagy fog vele dolgozni.
Ez eljutott ahhoz, amit ma fogunk csinálni - kijavítva a projekt sajátosságait.
A projekt
Egy kis háttér a projektről, amelyet visszafogunk - ez egy Netflix által inspirált céloldal, amely a MovieDB API-ját használja.
A stíluslap
A cél az, hogy eltávolítsuk a „! Fontos” kulcsszót a CSS-szabályokból, amelyet alkalmaztunk, a kód újrafeldolgozásával, hogy az kövesse a specifitás szabályait.
Az alábbiakban láthatja a projekt stíluslapját.
@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { width: 100%; } .wrapper #header { position: fixed; z-index: 300; padding: 15px; width: calc(100% - 30px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, black 0%, transparent 100%); } .wrapper #header #brand-logo { color: #d32f2f; text-shadow: 1px 1px 2px black; letter-spacing: 5px; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 22px; } .wrapper #header #menu-icon { display: none; } .wrapper #header .nav-link, .wrapper #header .icon { color: #bdbdbd; cursor: pointer; } .wrapper #header .nav-menu { width: 400px; display: flex; justify-content: space-around; align-items: center; } .wrapper #header .nav-link { padding: 5px 10px; font-size: 15px; font-family: century gothic; text-decoration: none; transition: background-color 0.2s ease-in; } .wrapper #header .nav-link:hover { color: #c62828; background-color: rgba(0, 0, 0, 0.7); } .wrapper #header .icon { font-size: 16px; } .wrapper #header .icon:hover { color: #c62828; } .wrapper #site-banner, .wrapper #categories { width: 100%; } .wrapper #site-banner { height: 550px; background-image: url("//s1.gifyu.com/images/rampage_2018-1024x576.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn, .wrapper #site-banner .main-overview { position: absolute; z-index: 3; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn { text-transform: uppercase; } .wrapper #site-banner .main-movie-title { top: 120px; left: 20px; background: -webkit-linear-gradient(#ff9100, #dd2c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 55px; font-family: Montserrat; font-weight: bold; } .wrapper #site-banner .main-overview { width: 400px; top: 230px; left: 25px; color: #fafafa; line-height: 25px; font-family: helvetica; } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; top: 350px; left: 25px; border: none; border-radius: 20px; color: #fafafa; cursor: pointer; transition: all 0.2s ease-in; background-color: #ff0000; box-shadow: 1px 5px 15px #940000; } .wrapper #site-banner .watch-btn:hover { color: #F5F5F5; background-color: #940000; } .wrapper .after { position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .wrapper #categories { padding: 30px 0; display: flex; flex-direction: column; background: linear-gradient(to top, #090909 0%, #000000 100%); overflow: hidden; } .wrapper #categories .category { margin: 30px 0; } .wrapper #categories .category-header, .wrapper #categories .content { margin-left: 20px; color: #B0BEC5; font-family: helvetica; } .wrapper #categories .category-header { margin-bottom: 50px; font-weight: normal; letter-spacing: 5px; } .wrapper #categories .content { position: relative; right: 0; display: flex; justify-content: flex-start; transition: all 3s ease-in-out; } .wrapper #categories .movie { margin-right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .wrapper #categories .movie-img { transition: all 0.2s ease-in; } .wrapper #categories .movie-img:hover { -webkit-filter: contrast(1.1); filter: contrast(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); cursor: pointer; } .wrapper #footer { width: 100%; height: 120px; background-color: #090909; display: flex; align-items: flex-end; justify-content: flex-start; } .wrapper #footer #copyright-label { margin-left: 20px; padding: 10px; color: rgba(255, 255, 255, 0.3); opacity: 0.7; letter-spacing: 2px; font-family: helvetica; font-size: 12px; } //Media Query @media (max-width: 750px) { .nav-menu { visibility: hidden; } #menu-icon { display: block !important; font-size: 22px; } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; font-size: 13px; } .movie-img { width: 170px; } }Tehát a stíluslapból láthatjuk, hogy a ! Fontos kulcsszó használata főleg a média lekérdezés szakaszra összpontosul, amely felvázolja azokat a stílusokat, amelyeket a böngészőnek alkalmazni kell, ha a képernyő szélessége kisebb, mint 750 képpont.
Tehát mi történik, ha eltávolítjuk a ! Fontos kulcsszót a CSS-szabályokból, amelyekre alkalmaztuk? Nos, már nincs „ütőkártyánk”, amely erőteljesen felülírná más CSS-választók CSS-szabályait, amelyek ugyanazt a HTML-elemet célozzák meg. Tehát a böngésző megnézi a stíluslapot, hogy van-e ellentmondó CSS-szabály.
Ha vannak, akkor annak meghatározása érdekében, hogy mely CSS-szabályokat kell alkalmazni egy másik felett, a böngésző a forrásrendet, a CSS-választók specifikumát és fontosságát fogja használni. Ha az ütköző CSS-szabályokkal rendelkező CSS-szelektorok specifikussága azonos, akkor a böngésző a forrásrendi szabályt használja, és a CSS-választó CSS-szabályait alkalmazza, amely a stíluslapon lejjebb található. Ezen információk felhasználásával láthatjuk, hogy ez a helyzet nem a stíluslapunk esetében áll fenn.
De ha az ütköző CSS-szabályokkal rendelkező CSS-szelektorok specifikációja nem azonos, akkor a böngésző a magasabb specifitású CSS-választó CSS-szabályait alkalmazza. Stíluslapunkból láthatjuk, hogy ez a helyzet; a média lekérdezésünkben szereplő CSS szelektorok alacsonyabb specifitással rendelkeznek, mint a stíluslapunk fő részében található CSS szelektorok.
Most, hogy azonosítottuk a problémát, javítsuk ki!
Először meg kell keresnünk a megfelelő CSS szelektorokat, amelyek megfelelnek a média lekérdezésünkben a CSS szelektoroknak.
.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { #menu-icon { display: block !important; ... } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; ... } }Láthatjuk, hogy a stíluslap fő részében található CSS-választók nagyobb specifitással rendelkeznek, mint a média lekérdezés megfelelő CSS-választói. Annak ellenére, hogy a média lekérdezés CSS-választói később megjelennek a stíluslapban, a böngésző a specifikussági szabályok miatt (amelyek elsőbbséget élveznek a forrás-rendelési szabályokkal szemben) alkalmazzák az előtte álló CSS-választók CSS-szabályait.
Ennek kijavításához meg kell növelnünk a média lekérdezés CSS-választóinak specifitási értékeit. Ha úgy csináljuk, hogy az azonos HTML elemeket megcélzó CSS szelektorok azonos specifikussággal rendelkezzenek, akkor a böngésző követni fogja a forrás sorrend szabályát. A média lekérdezésben felvázolt CSS-szabályokat (amelyek a stíluslap alján találhatók) kell alkalmazni, ha a képernyő szélessége kisebb, mint 750 képpont.
A végeredmény így fog kinézni:
.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { .wrapper #header #menu-icon { display: block; ... } .wrapper #site-banner .main-movie-title { font-size: 45px; } .wrapper #site-banner .main-overview { width: 350px; font-size: 14px; } .wrapper #site-banner .watch-btn { width: 130px; height: 25px; font-size: 13px; } }És ez az! Eltávolítottuk a ! Fontos kulcsszó minden nyomát a stíluslapról. Már láthatjuk, hogy a stíluslap könnyebben olvasható, és el lehet képzelni, hogy a felújított stíluslapunk sokkal könnyebben kezelhetõ és fenntartható (fõleg, ha mások is dolgoznak rajta).
Következtetés
Szóval, mit tanultunk?
Megtudtuk, hogy a böngészők miként határozzák meg, hogy mely CSS stílusokat kell alkalmazni, a szelektorok forrássorrendje, specifikussága és eredete alapján. Azt is megtudtuk, azokról a problémákról, amelyek akkor merülhetnek fel használatával ! Fontos a CSS és miért használatát meg kell tartani, hogy abszolút minimum.
A dolgok kijavításához nem kell a ! Fontos használatához folyamodnunk - sokkal jobb megoldások vannak odakinn.
A specifitás fogalma egy ideig eltarthat, mire a fejét megkapja, de remélem, hogy a folyamat dokumentálásával és egy valós projekt felhasználásával segít jobban megérteni a specifitás fogalmát és annak alkalmazását a saját CSS-ben.
További források
- MDN webdokumentumok
- Batyity: Mandy Michael
- Andy Clarke CSS-specifikus háborúi
- Francesco Schwarz sajátosságainak megjelenítője.
- A! Használatakor fontos a Chris Coyier helyes választása
A projektet, amelyen dolgoztunk, itt talál.