Jednou z technológií, ktoré používame pri tvorbe webovej stránky, je aj CSS. V roku 2023 si sotva niekto dokáže predstaviť webovú stránku bez CSS, ak má taká stránka za niečo stáť.
Pri používaní WordPressu, alebo builderov v rámci WordPressu, alebo aj v rámci iných CMSiek, možno ani nemusíme prísť priamo do styku s CSSkom. Ale niekedy to proste treba, a tak vedieť CSSko určite nie je stredoškolská matematika, ktorú v živote nevyužiješ.
Čo to je to CSS?
Je to skratka z Cascading style sheets (pozor, nemýliť sheet a shit!). V preklade teda kaskádové štýlovacie hárky, alebo ľudský preklad – kaskádové štýly.
Kým HTML tvorí kostru stránky a obsah stránky, CSS (až na malé výnimky) tvorí vizuál / formát / vzhľad stránky. Preto hovorím, že v roku 2023 predstaviť si stránku bez CSSka je dosť pain. Bol by to hnus. Nehovoriac o tom, že s CSSkom sa často hráme aj pri responsive designe.
Ako funguje?
CSSko je jeden, alebo viac súborov, resp. pravidiel, ktoré sa viažu na vybrané HTML elementy a ovplyvňujú ich vizuálne vlastnosti.
Príklad CSSka:
p {
font-size: 17px;
}
Vyššie uvedené pravidlo definuje, že všetky HTML elementy <p> (čiže odstavce) majú mať veľkosť písma 17px.
Táto technológia má nie nadarmo prívlastok kaskádové. Jednotlivé vlastnosti pre jednotlivé elementy sa môžu navzájom vrstviť, prepisovať, ovplyvňovať, dediť a vyhráva vždy to najsilnejšie určené pravidlo. Alebo to posledné. Uvidíš ďalej.
Spôsoby zápisu CSS
Spôsoby existujú tri. Nič viac, nič menej.
Priamy zápis do HTML tagu (Inline CSS)
<p style="font-size:17px">Tantum Ergo Sacramentum veneremur cernui...</p>
Priamy zápis CSSka vykonáme tak, že do zvoleného HTML tagu jednoducho pridáme nový atribút style. A už píšeme jednotlivé CSS pravidlá. Toto je druhé najsilnejšie riešenie. Priamy zápis do konkrétneho HTML tagu. Od neho silnejšie je už len !important. Ale o tom až ďalej.
Výhodou tohto zápisu je, že sa dá písať priamo do DOM, ovplyvňuje len ten vybraný HTML element a keďže ide o druhé najsilnejšie pravidlo, takmer žiadne iné pravidlá nás nebudú ovplyvňovať.
Nevýhody však prevažujú. Najväčšou nevýhodou je nemožnosť znovupoužitia. Čiže ak by sme chceli nastaviť viacero odstavcov na veľkosť textu 17px, museli by sme to všade kopírovať ako blbci. Nehovoriac o tom, že by sme to možno chceli mať na ďalších 150 podstránkach, to by sme asi ošaleli. A čo potom v prípade, že chceme hromadne zmeniť veľkosť textu napr. na 18px? Ďalší kríž.
Ďalšou nevýhodou je, že ide o druhé najsilnejšie pravidlo. Áno, ja viem, že vyššie som to uviedol medzi výhodami, ale ide o uhol pohľadu. Z hľadiska praxe si chceme držať čo najmenej inline CSSiek, aby sme ich vedeli ovplyvňovať z jedného miesta.
No a napokon, jednotlivé štýly sa dajú písať len do jedného riadku (v závislosti od editora) a nedajú sa pekne štruktúrovať, čo robí dodatočné úpravy zložité.
V praxi sa stretneme s týmto zápisom pri použití niektorých WYSIWYG editorov, aj WordPressacky TinyMCE rád používa tieto inline štýly.
Pomocou štylopisu (stylesheet)
<html>
<head>
<style>
p {
font-size: 17px;
}
</style>
</head>
</html>
Zápis pomocou stylesheetu sa robí tak, že do hlavičky stránky <head> si vložíme element <style> a do neho píšeme CSS pravidlá.
Ono v skutočnosti si tento <style> tag môžeme vložiť kde chceme, kľudne aj do <body>, bude to fungovať, ale CSSková špecifikácia sa tvári, že nie. Takže – nič som nepovedal.
Výhody neviem, či vôbec tento zápis má. WordPress čas od času hodí tento zápis niekde do kódu. Preskúmajte akúkoľvek nezacachovanú wordpress stránku a uvidíte (hádže tak napr. CSSko k smajlíkom). Osobne sa mu vyhýbam najviac ako sa len dá.
Nevýhody sú také, že takýto zápis, pokiaľ ho robíme staticky, má vplyv len na tú podstránku, do ktorej hlavičky tento kód vložíme. Čiže znovu musíme kopírovať medzi stránkami, čo nechceme.
V praxi sa s týmto zápisom stretávame v jednosúborových platformách, kde nemôžeme inak. Napríklad pri generovaní objednávky vo Woocommerce v PDF musíme do generátora poslať jeden jediný súbor, inak to neprejde. Alebo pri štýlovaní e-mailov. Nemáme tu na výber…
Externým súborom
<html>
<head>
<link rel="stylesheet" href="moj-subor.css">
</head>
</html>
Na záver to, čo sa používa najčastejšie. A to je externý zápis. Funguje to asi tak, že popri index.html si vytvoríme ďalší súbor s ľubovoľným názvom a príponou .css. Do hlavičky indexu ho potom jednoducho priradíme (includujeme) prostredníctvom tagu <link>. Tento include samozrejme môžeme (a prakticky aj vykonávame) vykonať na všetkých podstránkach. Ďalším faktom je to, že môžeme takto includovať aj viacero .css súborov.
Pozn.: Pri kódení custom témy, musí existovať súbor s názvom style.css, ktorý v komentároch obsahuje základné informácie k téme, ako napr. jej názov, autora, verziu a bla bla bla. Bez tohto súboru WordPress nerozozná tvoju tému, takže style.css musí existovať, a obsahovať potrebný koment, a to aj vtedy, ak do neho vôbec neplánuješ z nejakých príčin písať žiadne reálne CSSko.
Obrovskou výhodou je fakt, že celá webová stránka čerpá CSSko z jediného súboru, ktorý stačí upraviť na jednom mieste a všade sa všetko zmení. Vieme tak napr. globálne nastaviť veľkosti, farby. Vieme zameriavať jednotlivé CSSkové pravidlá na HTML elementy na základe ich typu, triedy, IDčka a pod. Tomu sa ale viac budeme venovať v sekcií o selektoroch.
Nevýhoda nie je asi žiadna.
V praxi sa tento spôsob zápisu CSSka využíva všade, povedal by som, že 99% CSSka sa zapisuje externe, čiže týmto spôsobom. Keď otvoríš zdrojový kód nejakej WP stránky, napríklad aj tejto, a dáš si vyhľadať (ctrl+F), nájdeš <link>ov do bludu.
Aký je syntax CSS?
Slovo syntax pôvodne označuje nejaké bludy z gramatiky, takže grammar nazis asi aktuálne lapia šok. V prenesenom význame v IT to však znamená spôsob zápisu jednotlivých programovacích jazykov, aj keď CSS rozhodne nie je programovací jazyk. Dokonca, na rozdiel od HTML, to ani vôbec nie je jazyk. Ale to je jedno.
selector {
property: value;
property2: value;
property3: value;
}
Každé CSS pravidlo sa skladá z niekoľkých prvkov. Podstatné je zameranie, čiže ktorého HTML tagu sa budú uvedené pravidlá týkať. Inými slovami tú časť nazývame aj Selektor – selector.
Dané pravidlá sú obalené v kučeravých zátvorkách (curly brackets) (klávesová skratka ctrl+alt+b /n – za predpokladu, že si taký fekalista ako ja a bohapusto kódiš na SK klávesnici).
Jednotlivé vlastnosti sa potom píšu v štýle:
názov vlastnosti dvojbodka hodnota bodkočiarka
Hoci za posledným pravidlom bodkočiarka byť nemusí, nauč sa ju tam dávať. O mesiac, či dva potom dopíšeš nové pravidlo, nepôjde ti to a budeš sa rozčuľovať.
CSSko má tú nevýhodu, že od neho nedostaneš nikdy žiadnu chybu, žiaden fatal error, žiaden warning, nič. Proste „len“ nebude fungovať a ty si budeš trhať vlasy, prečo je to tak.
No a potom ideš znova – Ďalší selektor, curly brackets, ďalšie pravidlá atď atď.
V produkčných webových stránkach dosahujú CSSka tisícky riadkov. Tak to je. Dopad na výkon a rýchlosť stránky je však zanedbateľný, prehliadač CSS doslova žere. Na tejto stránke, ktorú aktuálne čítaš, sa mi style.css načítalo za 57 milisekúnd. Vplyv na to má veľkosť súboru (čím viac kb, tým dlhší loading), rýchlosť netu a dokonca aj rýchlosť počítača – procesor, RAMka atď…
Čo by si ešte mal vedieť k úvodu CSS?
Komenty
/*CSS komentár*/
/*CSS
viacriadkový
komentár*/
Komenty sa do CSSka píšu tak, že začiatok komentára je označený znakmi /* a koniec naopak */. Čokoľvek medzitým je brané ako komentár, teda keď si zakomentuješ časť pravidiel, nebudú sa tieto pravidlá aplikovať na front-ende. Ale v developer tools ich uvidíš ako preškrtnuté (o tom v budúcej časti).
Verzie
Keď som dakedy za Hitlera začínal s kódením, bola verzia CSS2. Pokiaľ viem, tak jeho špecifikácia nebola nikdy dokončená na 100%, každý prehliadač si takpovediac interpretoval CSS pravidla po svojom. Tzn. obávaný internet explorer pridával odsadenia kde sa mu chcelo a ako sa mu chcelo, čo v niektorých prípadoch vedelo narobiť peknú šarapatu.
Dnes používame verziu CSS3 a pokiaľ nepoužívaš dajaký storočný nepodarok s AMD Duronom a Netscape browserom (to je dajaký prehliadač, ktorý chcípol v roku 2003), nemusíš nič riešiť.
Verziu CSS netreba písať nikde, automaticky fungujeme na najvyššej verzií CSS3 a nič neriešime.
Minifikácia
Niekedy sa môžeš stretnúť so súborom style.min.css. To je tzv. minifikovaný súbor, čiže sú z neho odstránené zlomy riadkov, komentáre a iný bordel a všetko je to natrepané v jednom jedinom kilometer dlhom riadku.
Význam je ten, že súbor je takto zmenšený, má teda menšiu veľkosť. Pri našich smiešnych wordpressackych úpravách CSSka je to zbytočné, ale nejaké CSS frameworky, ako napr. Bootstrap, ktoré obsahujú stotisíc riadkov, už vedia touto minifikáciou ušetriť pár kilobajtov.
Inak sa tento súbor správa ako úplne obyčajné CSS, môžeš ho upravovať, písať do neho a dokonca aj pridávať nové riadky. Je to len označenie pre človeka (a možno aj pre program), že ide o minifikovaný súbor. Ak si z toho magor, môžeš si súbor unminifikovať, napr. prostredníctvom tohto toolu.
Preprocesory
Môžeš sa stretnúť aj s preprocesormi – LESS a SASS. Písal som vyššie, že CSS nie je programovací jazyk, ba dokonca, že to vôbec nie je jazyk. Neobsahuje teda žiadne podmienky, premenné, cykly, ani nič, čo by sa nám v praktickom živote zišlo.
Preto niektorí ľudia vyvinuli preprocesory, kde existujú premenné, podmienky a celkovo je zjednodušený zápis a odstránené opakovanie.
Uvediem príklad: Raz si niekde hore definuješ odtieň červenej ako napr. $red :#f20000; a potom všade inde v celom stotisíc riadkovom CSS súbore, kde chceš mať tú farbu, napíšeš len color:$red; A rovnako postupuješ s fontami, oblými rohmi atď atď, proste brutálne to zjednodušuje robotu.
V reálnom živote sa s niečim takým stretneš pri písaní custom CSS do Elementora. Tam môžeš použiť premennú s názvom „selector“, ktorý ti vygeneruje jedinečný kód pre daný selektor, do ktorého to píšeš. Alebo farbu vieš napísať ako var(–e-global-color-primary) a pod.
V konečnom dôsledku prehliadače zatiaľ nevedia čítať priamo preprocesory, čo je škoda. Takže je treba ich nejako (manuálne, či skriptom) prekompilovať na CSS3. Elementor sa o to postará sám. Laravel má na to nejaký svoj tool. Pri Vanilla kódení si nepomôžeš, musíš to robiť manuálne.
Responsive design
Responsive design je označenie pre zvláštne CSSkové pravidlá, ktoré sa aplikujú len za určitých podmienok. Tými podmienkami väčšinou myslíme šírku displaya, ale tiež napríklad typ zariadenia (screen, print).
Takto vieme upravovať jednotlivé pravidlá, ktoré sa aplikujú napr. len do šírky displaya 768px – čiže len mobily. Do 1024px len tablety a pod. Defaultom je Full HD rozlíšenie, čiže 1920 x 1080px a často sa stretávame aj s 4k rozlíšením, čo je 3840 x 2160 pixelov.
@media screen and (max-width:767px) {
selector {
background-color: #000;
}
}
Element nadobudne čierne pozadie len vtedy, ak šírka displaya je 767px, alebo menej. Čiže na mobile.
Farby
V CSS často pracujeme s farbami. Existuje niekoľko možnosti ako farbu zapísať.
Hexadecimálny zápis
Hexadecimál je asi najčastejšie používaný zápis farieb. Každá farba má svoj kód, ktorý sa zapisuje v miešacom pomere červenej, zelenej a modrej. Nadobúda hodnoty od 00 po ff. Ide teda o šestnástkovú sústavu (na rozdiel od klasickej desiatkovej a časovej – šesťdesiatkovej sústavy).
Jednotlivý miešací pomer medzi červenou, zelenou a modrou (po anglicky skratka RGB) vlastne určuje výslednú farbu. Nulová hodnota všetkých farieb v miešacom pomere tvorí čiernu – zápis #000000. Naopak – plnosť všetkých farieb tvorí bielu – #ffffff. Absolútne odtiene šedej majú hodnoty medzi tým, ale vždy tak, aby všetky tri farby boli v rovnakom miešacom pomere. Napríklad #9a9a9a. Čím bližšie je číslo hodnoty #ffffff, tým je svetlejšia sivá a čím bližšie je #000000 tým je tmavšia sivá.
Ak sa vo farbe vyskytujú rovnaké hodnoty pre jednu farbu, je možné ich skrátiť na tri znaky. Vysvetliť to ľudskými slovami neviem, takže na príklade: #333 je to isté ako #333333 a #cfa je to isté ak #ccffaa. Dúfam, že už chápeš.
Najnovšie je možné do tohto hexadecimálneho tvaru doplniť aj alfa kanál (priehľadnosť), čo je úplne že super. Robí sa to tak, že dopíšeme ďalšie dve hodnoty (akoby štvrtú farbu). Hodnota 00 bude znamenať absolútnu priehľadnosť, čiže transparentnosť a hodnota ff bude znamenať nulovú priehľadnosť. Nie je možné však použiť pri tomto skrátený trojznakový zápis.
Takže #00000000 bude vlastne priehľadná farba, kvôli posledným dvom 00, ktorú určujú plnú priehľadnosť farby. Takže rovnaké nič by sme dostali aj v prípade #ffffff00 (úplne priehľadná biela).
Ak napíšeme napr. #000000ff, dostaneme to isté ako #000, alebo #000000. Čiže čiernu s nulovou priehľadnosťou. Pokiaľ teda nechceme (polo)priehľadnú farbu, nemusíme písať posledné dvojčísle pre alfakanál.
No a ak chceme trošku priehľadnú farbu, jednoducho nastavíme hodnotu medzi 00 a ff, napr. #00000099; bude priehľadná čierna.
RGB
Menej častý spôsob je zápis prostredníctvom RGB. Ide vlastne o to isté, čo v prípade hexadecimálneho kódu, avšak používame desiatkovú sústavu a syntax zápisu sa trošku líši. Je to vlastne niečo ako CSS-ková funkcia (ale len niečo, CSSko funkcie nemá – uvádzal som to vyššie). Jednotlivé hodnoty môžu nadobúdať 0 až 255. Oddeľujú sa čiarkou a desatinné čísla bodkou (pozor, nepomýliť sa, nebude to fungovať).
Ak chcete pridať alfa kanál, „funkcia“ sa nebude volať rgb, ale rgba (red, gree, blue, alpha) a bude obsahovať štyri čísla.
selector {
background-color: rgb(0,0,0);
color: rgba(255,255,255,0.5);
}
V tomto prípade ide na riadku 3 o 50% priehľadnosť. Ako poznáme z matematiky, nadobúda desatinné hodnoty 0-1, 0 je 0% (transparentná) a 1 je 100%. Stretneme sa s tým potom ešte pri vlastnosti opacity.
Pomenované farby
Existuje ešte možnosť použitia niekoľkých tzv. pomenovaných farieb, ide o farby, ktoré majú svoje meno a to meno vieme vložiť namiesto hodnoty. Celý zoznam tu: https://www.w3.org/wiki/CSS/Properties/color/keywords.
<p style="color:orange">
Tento text bude oranžový
</p>
Tento text bude oranžový
HSL
Posledná možnosť zadávania farieb je prostredníctvom HSL. To je vlastne zadávanie odtieňa (hue), sýtosti (saturation) a jasnosti (lightness). Popravde sám nerozumiem ako to funguje, lebo som to zatiaľ videl iba raz. Údajne je takéto zadávanie farieb jednoduchšie z pohľadu hľadania podobných farieb (stačí nejako upraviť parametre a dostávame sa na iný odtieň farby). Viac o tom možno naštudovať tu: http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#hsl.
Ale ako hovorím, mám za sebou stovky projektov a videl som to raz…
Ešte jedna vec
A to sa netýka len farieb. Niekedy sa môžete stretnúť s takým zápisom
color: rgba(20,59,164,.6);
Akoby tam chýbala tá nula. Áno, je to skutočne tak. Desatinné hodnoty vieme v CSSku písať bez úvodnej nuly. A keďže kóderi sú lenivé bytosti, často tú nulu vynechávajú. Ja ju dávam vždy, aby som sa nezopsul, ale fungovať to bude tak či tak. Len aby si vedel.
transition: all 0.350s ease;
transition: all .35s ease;
Obidve vyššie uvedené hodnoty sú to isté.
Dĺžkové jednotky
V CSSku pracujeme aj s dĺžkami, ale nejde o centimetre. Aj keď, popravde, zažil som už aj to, že klient mi ukazoval s pravitkom na monitore, že toto chce posunúť o dva centy doprava a hento doľava. Pri basic userov normálna vec, ale ja som kukal ako puk.
Všetky jednotky píšeme za číslom bez medzery. Ak je hodnota danej vlastnosti 0, potom nepotrebujeme písať žiadnu jednotku. Veď 0 pixelov a 0 milimetrov a 0 svetelných rokov je stále rovnaká nula, ne?
Pixely
Najčastejšie prídeme do kontaktu s pixelami. Pixel je jeden maličký štvorček na tvojej obrazovke, ktorý nadobúda určitú konkrétnu farbu. Niekde vyššie som spomínal Full HD rozlíšenie (resolution), to znamená, že na takom monitore máš vedľa seba 1920 pixelov v jednom riadku. A riadkov máš 1080 (FullHD sa teda označuje ako 1920×1080), dokopy máš teda k dispozícií 2 073 600 pixelov na jeden monitor. Pekné nie?
Samozrejme, zanedbal som tu, že webstránka nie je rozcahaná na celý monitor, lebo hore máš lištu s kartami, pod tým adresu stránky, dole zas windows toolbar (ak si na windowse), takže tá výška je kapičku menšia.
Predstav si, že šírku svojho monitora rozdelíš na 1920 rovnako malých častí. Koľko bude mať jedna časť? Mikrometre. A každá táto jedna časť môže svietiť inou farbou. Dokopy vytvárajú to, čo vidíš. Pekné, hejže… Dobre, späť k CSS…
V pixeloch určujeme absolútnu veľkosť nejakého HTML elementu. Keď zadám, že šírka elementu má byť 300px, tak to znamená, že z 1920 bodov bude 300 bodov zaberať môj element. Tých 300px bude zaberať vždy, bez ohľadu na to, na akom monitore to zobrazujem, či na 4k, alebo na 320px úzkom mobile.
selector {
width: 300px;
}
V tomto prípade nastavím šírku elementu 300px, vyzerať to bude takto:
Tento element má 300 pixelov.
Percentá
Dosť často sa stretávame aj s percentami. Percentuálne vieme nastaviť šírku ľubovoľného elementu vzhľadom na iný element, alebo vzhľadom na šírku monitora.
selector {
width: 50%;
}
Tento element má 50%
A teraz nastáva otázka… 50% Z čoho? Keď si lepšie všimneš, ten HTML widget má šedé pozadie. Môj element nadobudne šírku 50% z nadradeného elementu (inými slovami 50%, čiže polovicu šedého pásma). Prečo to tak je, ukážeme si neskôr. Len aby si vedel, že nie vždy sa bavíme o šírke monitora. Percentá teda považujeme za relatívnu jednotku, lebo neudáva presnú hodnotu, ale mení sa v závislosti od x faktorov.
No keď dáš width: 100%, element nadobudne celú dostupnú šírku (aj na veľkom PC, aj na tablete, aj na mobile).
Ďalšie absolútne jednotky
Je ich do bludu, tak už iba v skratke:
cm a mm: Dobre, trošku som si robil prdel, že nebudeme lietať pravítkom po monitore. Teoreticky sa to dá. V praxi sa s tým ale stretávam naozaj veľmi veľmi málo. To asi preto, že 1cm na monitore je nič, ale 1 cm na mobile je pol displaya.
in: Palec, čiže 2,54 cm. Používa sa možno v UK a to je tak všetko.
pt: Point – bod. Je to 1/72 palca. Podľa mňa zbytočná jednotka, ale čas od času sa s ňou stretneš. Najmä pri veľkosti fontov. Neviem prečo.
pc: Picas, alebo 12 pointov. Význam tejto jednotky už naozaj nechápem… Nikdy som to naživo nevidel.
Ďalšie relatívne jednotky
em: Em je asi najzákladnejšou relatívnou jednotkou. Má takú veľkosť, ako je veľkosť písmena „m“ v aktuálne používanom fonte. Čiže tu mám 17px a keby som dal 2em, tak to znamená 34px. Ak zvýšim veľkosť fontu, zväčší sa aj veľkosť 2em. Často sa používa ako desatinné číslo.
ex: To isté, len sa používa veľkosť písmena „x“.
ch: Veľkosť rovnaká ako šírka čísla „0“
rem: Veľkosť písmena „m“ vzhľadom na root element (čiže <body>)
vw: viewport width, čiže šírka zariadenia. 100 znamená plnú šírku. Stretneš sa s tým, najmä pri responsive designe.
vh: viewport height, čiže výška zariadenia. 100 je plná výška
Rozdiel medzi percentami a vw/vh? No taký, že percentá sú relatívne k nadradenému elementu. Vw a vh sa týka zariadenia a nedbá na nadradené elementy.
Gratulujem
Prvý diel CSS seriálu máme za sebou. Nabudúce sa povenujeme troška selektorom. Je to veľmi zaujímavé, máte sa na čo tešiť.
