Sacha Greif nyíltan csodálkozott hogy a CSS túl nagy lett-e. Az elmúlt néhány évben a böngészőkben szállított összes finomsággal – konténer lekérdezések! relatív színszintaxis! kaszkád rétegek! logikai tulajdonságok! tartományok a médialekérdezésekben! egyéni átalakulások! :has() választó! - és minden, ami a lehetséges horizonton van - CSS kapcsolók! fészkelő! színkeverés! görgethető animációk! hatókörű stílusok! — határozottan más tanulási görbe van manapság a CSS-ben az új és tapasztalt front-enderek számára egyaránt.
Lehet, hogy volt idő, amikor meg lehetett ismerni a legtöbb CSS-tulajdonságot és azok működését. Azok az idők rég elmúltak, legalábbis egy olyan öreg kéznél, mint én. De ez felveti a kérdést: milyen CSS-t kell feltétlenül tudnod?
Vincas Stonys nemrég belevágott egy listába. Chris összerakni egyet a CSS3 óta megjelent szolgáltatások alapján. Valószínűleg van ötlete, hogy mit vegyen fel egy listába. Ha össze kellene szednem a Top 5-öt, és csak a tulajdonságokra és a választókra kellene korlátoznom magam, akkor valahogy így nézne ki…
writing-mode
Nem tudok eleget mondani a writing-mode ingatlan. Ami fontossá teszi – különösen tanulási szempontból – az az, hogy olyan befogadó elveket állít fel, amelyek figyelembe veszik az elrendezések elkészítését, függetlenül a felhasználó nyelvétől. Jó megértése writing-mode megértéséhez vezet logikai tulajdonságok és értékek, és ezek pedig megteremtik a terepet a dokumentumáramlás megértéséhez és a szempontok szerinti gondolkodáshoz block, inline, startés end nem pedig a fizikai irányok.
display
Nehezen tudom elhinni, hogy bárki is tud jó CSS-t írni anélkül, hogy szilárdan értené display ingatlan. Ez egy tulajdonság és egy keret az elrendezések létrehozásához. Enélkül nincs Flexbox vagy CSS Grid, így olyan, mint egy kapuőr a fontos funkciók megértésében.
Ráadásul a display az ingatlan tökéletesen kiegészíti writing-mode. Pontosan erre lesz szükséged egyszer writing-mode bemutatta Önt a dokumentumáramlásnak és a logikai irányoknak. Szüksége lesz egy tulajdonságra egy elem normál áramlásának megváltoztatásához (például egy blokk elem módosításához soron belülire), vagy elkezdheti a dolgokat elhelyezni (például rugalmas elrendezési kontextus létrehozásához), és ez az display jön a játék.
margin / padding / border
Jaj, itt teljesen csalok, de gondolj a tanulásra margin, paddingés border együtt valahogy elkerülhetetlen. Ezek mind részei A doboz modell, mind segít a térközök és a stílus kialakításában, és mindegyikhez ismerkedés szükséges CSS hosszegységek. Ha ismeri ezeket a tulajdonságokat, és hogyan járulnak hozzá egy elem számított méretéhez, akkor sokkal több stílust vezérelhet, és eloszlathat minden félreértést azzal kapcsolatban, hogy egy elem miért akkora, mint amilyen – ez egy gyakori CSS-fejfájás!
::before és a ::after
Egy másik, ahol kicsit csalok. Igen, ::before és a ::after két különálló álelem, de nem tudom elképzelni, hogy megtanuljam az egyiket a másik nélkül. Ez egy két fer!
Emlékszem, mennyire megdöbbentő volt számomra, hogy megtudtam, hogy ezek léteznek, és mindent meg lehet belőle alkotni hűvös felhasználói felület effektusok teljesíteni egyosztós illusztrációk. Új lehetőségeket nyit meg, és először bepillantást enged abba, hogy a CSS valójában milyen erős.
@media
Hoppá, már az ötödik és egyben utolsó pontomnál tartok a listában, és úgy érzem, még mindig annyi CSS jóság van, ami ide tartozik. De ha egy utolsó dolgot kell választanom, akkor az lenne média lekérdezések. Miért? Mert ez a legfontosabb összetevő a gördülékeny, rugalmas elrendezések és a különböző megtekintési kontextusok létrehozásához. Tároló lekérdezések Lehet, hogy lekerül a listámról, ahogy érik, de egyelőre @media egy nagyszerű alapozó a reszponzív tervezéshez.
Azon túl, @media egy szép első lépés a CSS feltételes tulajdonságai felé. Függetlenül attól, hogy a használt eszköz típusa alapján írunk-e lekérdezést (pl. screen or print) vagy ha a böngésző nézete megfelel bizonyos feltételeknek (pl. width >= 768px), A @media A szintaxis hihetetlenül hasznos a különböző feltételekhez optimalizált elrendezések létrehozásához.
Ja, és még nem is érintettük, hogyan @media az akadálymentesítésre vonatkozik, köszönhetően annak képességének stílusokat alkalmazhat a felhasználó preferenciái alapján (például, prefers-reduced-motion). Tehát a feltételes elrendezések elkészítése mellett a médialekérdezések szép lépést jelentenek a befogadó tervezés megértése felé.
Megtisztelő említések
A CSS-t egy öt kötelező tulajdonságot és választót tartalmazó listába bontani nehéz, különösen most, hogy a CSS ma erősebb, mint mondjuk öt évvel ezelőtt. Számos más elem is van, amit nagyon szerettem volna, mint például (nem meghatározott sorrendben):
calc()has()colorfontoverflowposition(főleg ezt)z-index
De kitartok a döntéseim mellett. A CSS megtanulása fontosabb, mint a tulajdonságok listájának memorizálása. Ez egy utazás, és úgy gondolom, hogy az általam választott öt jó kis tanulási útvonalat farag, amely megalapozza a jó stílusszabályok megírását, és a következő lépéseket a CSS-be való mélyebbre merüléshez.
Rendben, mondd el a tiédet!
Nem értesz egyet a listámmal? Neked kellene! Lefogadom, hogy van néhány okos véleményed, és szeretném látni, hogyan kerekítetted volna ki a Top 5-ös listát.
