Kodėl HTML ir CSS vis dar aktualūs 2024-aisiais
Kiekvieną kartą, kai internete pasirodo nauja JavaScript biblioteka ar framework’as, kažkas internete parašo, kad HTML ir CSS „jau nebereikalingi” arba kad juos „galima praleisti”. Tai vienas iš labiausiai klaidinančių mitų, kurį tenka girdėti pradedantiesiems web kūrėjams. Realybė tokia: be tvirto HTML ir CSS pagrindo, bet koks React, Vue ar Angular projektas tampa kortų namelio statyba ant smėlio.
HTML (HyperText Markup Language) ir CSS (Cascading Style Sheets) yra ne tik „senų laikų technologijos” – tai interneto stuburas. Kiekvienas tinklalapis, kurį matai naršyklėje, galiausiai yra HTML struktūra, papuošta CSS stiliais. Net jei naudoji modernų framework’ą, jis vis tiek generuoja HTML. Tad mokėti skaityti ir rašyti šias technologijas – tai tarsi mokėti skaityti ir rašyti skaitmeniniame pasaulyje.
Šiame straipsnyje pereisime per esminius dalykus, kuriuos reikia žinoti apie HTML ir CSS – ne teoriškai, o praktiškai. Kalbėsime apie tai, kaip viskas iš tikrųjų veikia, kokių klaidų dažniausiai daro pradedantieji ir kaip išvengti dažniausių spąstų.
HTML struktūra: ne tik tagai, bet ir semantika
Daugelis žmonių, pradėdami mokytis HTML, galvoja, kad tai tiesiog „tagų rašymas”. Techniškai taip, bet tai tik pusė tiesos. HTML yra apie prasmę – kiekvienas elementas turi pasakyti naršyklei (ir žmonėms, skaitantiems kodą), ką tas turinys reiškia, o ne tik kaip jis atrodo.
Paimkime paprastą pavyzdį. Galima parašyti:
<div class="header">Mano svetainė</div>
<div class="nav">...</div>
<div class="content">...</div>Arba galima parašyti:
<header>Mano svetainė</header>
<nav>...</nav>
<main>...</main>Vizualiai naršyklėje gali atrodyti identiškai. Bet antrasis variantas yra semantiškai teisingas – naršyklė, paieškos varikliai ir ekrano skaitytuvai (naudojami žmonių su regėjimo negalia) supranta, kad <header> yra antraštė, <nav> yra navigacija, o <main> yra pagrindinis turinys.
Svarbiausi semantiniai elementai, kuriuos verta žinoti:
<header>– puslapio arba sekcijos antraštė<nav>– navigacijos meniu<main>– pagrindinis puslapio turinys (naudoti tik vieną kartą puslapyje)<article>– savarankiškas turinys (straipsnis, blog’o įrašas)<section>– tematinė turinio grupė<aside>– šoninis turinys, susijęs su pagrindiniu<footer>– poraštė
Praktinis patarimas: prieš rašydamas HTML, pagalvok apie dokumento struktūrą kaip apie laikraščio puslapį. Yra antraštė, yra straipsniai, yra šoninė juosta su reklamomis. Kiekvienas iš šių elementų turi savo prasmę, ir HTML turėtų tai atspindėti.
Dar vienas dalykas, kurį dažnai ignoruoja pradedantieji – tinkamas <head> sekcijos užpildymas. Minimalus teisingas HTML dokumentas atrodo taip:
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puslapio pavadinimas</title>
</head>
<body>
...
</body>
</html>Ta viewport meta žyma yra kritiškai svarbi mobiliesiems įrenginiams. Be jos tavo puslapis mobiliajame telefone atrodys kaip sutrauktas stalinio kompiuterio vaizdas. lang="lt" atributas padeda ekrano skaitytuvams ir paieškos varikliams suprasti, kokia kalba parašytas turinys.
CSS kaskadė: suprask, kaip stiliai „krenta”
CSS pavadinime žodis „Cascading” (kaskadinis) nėra atsitiktinis. Tai aprašo, kaip stiliai taikomi elementams – jie „krenta” iš viršaus į apačią, ir kelios taisyklės gali veikti tą patį elementą vienu metu. Suprasti šį mechanizmą – tai suprasti, kodėl tavo stiliai kartais veikia, o kartais ne.
Kaskadę lemia trys pagrindiniai veiksniai:
1. Specificity (specifiškumas) – kiek tiksliai CSS selektorius nurodo elementą. Inline stiliai turi didžiausią specifiškumą, po to seka ID selektoriai, klasės, ir galiausiai elementų selektoriai.
/* Žemas specifiškumas */
p { color: blue; }
/* Vidutinis specifiškumas */
.paragraph { color: red; }
/* Aukštas specifiškumas */
#unique-paragraph { color: green; }
/* Inline stilius (HTML atribute) - aukščiausias */
<p style="color: purple;">Jei visi šie stiliai taikomi tam pačiam elementui, tekstas bus violetinis – laimi inline stilius.
2. Tvarka – jei du selektoriai turi vienodą specifiškumą, laimi tas, kuris parašytas vėliau CSS faile.
3. Paveldėjimas – kai kurios CSS savybės automatiškai perduodamos iš tėvinio elemento vaikiniams. Pavyzdžiui, color ir font-family paveldi, bet margin ir padding – ne.
Dažna klaida – per daug naudoti !important. Tai tarsi šaukti garsiau, kai niekas nesupranta. Trumpuoju laikotarpiu tai išsprendžia problemą, bet ilgainiui CSS tampa netvarkomas ir sunku suprasti, kodėl kas nors veikia ar neveikia. Geriau suprasti specifiškumą ir rašyti tinkamus selektorius.
Box Model: viskas yra dėžutė
Vienas iš svarbiausių konceptų CSS – tai box model (dėžutės modelis). Kiekvienas HTML elementas naršyklėje yra stačiakampė dėžutė, ir ši dėžutė susideda iš keturių dalių:
- Content – pats turinys (tekstas, paveikslėlis)
- Padding – tarpas tarp turinio ir kraštinės
- Border – kraštinė
- Margin – tarpas tarp šio elemento ir kitų elementų
Čia yra subtilybė, kuri suklaidina daugelį: pagal nutylėjimą, kai nurodai elemento width, tai yra tik turinio plotis. Padding ir border pridedami viršuje. Tai reiškia, kad elementas su width: 200px, padding: 20px ir border: 2px iš tikrųjų užims 200 + 40 + 4 = 244px.
Šią problemą išsprendžia viena CSS eilutė, kurią rekomenduoju dėti į kiekvieną projektą:
*, *::before, *::after {
box-sizing: border-box;
}Su border-box reikšme, nurodytas width apima ir padding, ir border. Dabar elementas su width: 200px ir padding: 20px tikrai užims 200px – daug intuityviau ir lengviau skaičiuoti išdėstymą.
Praktinis patarimas: naršyklės developer tools (F12) yra tavo geriausias draugas norint suprasti box model. Paspaudus ant elemento, skirtuke „Computed” arba „Box Model” matai tikslias margin, padding, border ir content reikšmes vizualiai. Naudok tai nuolat – tai greičiausias būdas suprasti, kodėl elementas yra ne ten, kur tikėjaisi.
Flexbox ir Grid: modernaus išdėstymo pagrindai
Dar prieš keletą metų CSS išdėstymui naudodavo float savybę ir visokius „hackus”. Šiandien turime du galingus įrankius: Flexbox ir CSS Grid. Jie sprendžia skirtingas problemas, ir geriausi rezultatai gaunami naudojant abu kartu.
Flexbox puikiai tinka vienmačiam išdėstymui – elementų išrikiavimui eilutėje arba stulpelyje. Klasikinis pavyzdys – navigacijos meniu:
nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}Šios keturios eilutės išsprendžia tai, ką anksčiau reikėdavo daryti su sudėtingais float’ais ir clearfix’ais. justify-content kontroliuoja išdėstymą pagal pagrindinę ašį (horizontaliai, jei flex-direction: row), o align-items – pagal kryžminę ašį (vertikaliai).
CSS Grid skirtas dvimačiam išdėstymui – kai reikia kontroliuoti tiek eilutes, tiek stulpelius vienu metu. Puikus pavyzdys – puslapio maketas:
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}Tai sukuria klasikinį dviejų stulpelių maketą su antrašte ir porašte per visą plotį. 1fr reiškia „vienas laisvos vietos vienetas” – tai labai lankstus būdas paskirstyti erdvę.
Dažnas klausimas: kada naudoti Flexbox, o kada Grid? Paprastas atsakymas: jei tvarkai elementus viena kryptimi (horizontaliai arba vertikaliai) – Flexbox. Jei reikia dvimatės struktūros – Grid. Bet realybėje dažnai naudosi abu: Grid puslapio maketui, Flexbox atskirų komponentų viduje.
Vienas iš geriausių resursų mokantis šių technologijų – CSS-Tricks svetainės „A Complete Guide to Flexbox” ir „A Complete Guide to Grid”. Tai ne tik dokumentacija, bet ir vizualiai puikiai paaiškinti vadovai su interaktyviomis diagramomis.
Responsive dizainas: kodas, kuris veikia visur
Šiandien daugiau nei pusė interneto srauto ateina iš mobiliųjų įrenginių. Tai reiškia, kad svetainė, kuri gerai atrodo tik staliniame kompiuteryje, yra pusiau padaryta svetainė. Responsive dizainas – tai ne papildoma funkcija, o bazinis reikalavimas.
Responsive dizaino pagrindas – media queries (medijų užklausos). Jos leidžia taikyti skirtingus stilius priklausomai nuo ekrano dydžio:
/* Stiliai visiems įrenginiams */
.container {
width: 100%;
padding: 0 1rem;
}
/* Planšetiniams ir didesniems */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* Staliniams kompiuteriams */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}Čia matomas „mobile-first” principas – pirmiausia rašomi stiliai mobiliesiems, o po to, naudojant min-width, pridedami stiliai didesniems ekranams. Tai rekomenduojamas požiūris, nes mobiliesiems paprastai reikia paprastesnio išdėstymo, ir lengviau pradėti nuo paprasto ir komplikuoti, nei atvirkščiai.
Keli praktiniai patarimai responsive dizainui:
- Naudok santykinius matavimo vienetus (
rem,em,%,vw,vh) vietoj fiksuotų pikselių, kur įmanoma - Paveikslėliams visada dėk
max-width: 100%, kad jie neišeitų už konteinerio ribų - Teksto dydžiui naudok
clamp()funkciją, kuri automatiškai pritaiko dydį tarp minimalios ir maksimalios reikšmės:font-size: clamp(1rem, 2.5vw, 1.5rem); - Testuok ne tik naršyklės developer tools simuliatoriuje, bet ir realiame telefone – jie ne visada elgiasi vienodai
Šiuolaikinis CSS turi ir dar galingesnį įrankį – container queries. Skirtingai nuo media queries, kurios reaguoja į viso ekrano dydį, container queries reaguoja į tėvinio konteinerio dydį. Tai leidžia kurti tikrai modulinius komponentus, kurie prisitaiko pagal savo aplinką, o ne pagal ekraną. Palaikymas naršyklėse jau geras, tad verta pradėti mokytis.
CSS kintamieji ir šiuolaikinės funkcijos
CSS pastaraisiais metais labai išaugo kaip kalba. Jei mokėjai CSS prieš penkerius metus, dabar yra daug naujų funkcijų, kurios gali labai palengvinti darbą.
CSS Custom Properties (kintamieji) – vienas iš svarbiausių patobulinimų. Jie leidžia apibrėžti reikšmes vieną kartą ir naudoti visame CSS:
:root {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--font-size-base: 1rem;
--spacing-unit: 0.5rem;
--border-radius: 8px;
}
.button {
background-color: var(--color-primary);
padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
border-radius: var(--border-radius);
}
.button:hover {
background-color: color-mix(in srgb, var(--color-primary) 80%, black);
}Tai ne tik patogiau – tai leidžia kurti temas. Norint pakeisti visą svetainės spalvų schemą, pakanka pakeisti kintamuosius :root bloke. Tamsioji tema? Tiesiog perrašyk kintamuosius:
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #60a5fa;
--bg-color: #1a1a2e;
--text-color: #e2e8f0;
}
}Kitos vertos dėmesio šiuolaikinės CSS funkcijos:
:is()ir:where()– leidžia grupuoti selektorius elegantiškai::is(h1, h2, h3) { margin-bottom: 1rem; }:has()– „tėvinis selektorius”, kurio CSS neturėjo dešimtmečius. Pavyzdžiui,form:has(input:invalid)parenka formą, kurioje yra neteisingas laukasaspect-ratio– leidžia lengvai palaikyti proporcijas:aspect-ratio: 16 / 9;gapsu Flexbox – anksčiau veikė tik su Grid, dabar veikia ir su Flexboxlogical properties–margin-inline,padding-blockir panašios savybės, kurios veikia teisingai tiek kairės-į-dešinę, tiek dešinės-į-kairę kalboms
Kai kodas tampa gyvenimu: nuo teorijos prie praktikos
Teorija yra gerai, bet HTML ir CSS išmoksti tik rašydamas. Ir ne tik rašydamas – bet ir klaidindamas, ieškodamas, kodėl kažkas neveikia, ir galiausiai suprasdamas. Tai procesas, kurio negalima sutrumpinti.
Keletas konkrečių rekomendacijų, kaip efektyviai mokytis:
Kopijuok ir modifikuok. Rask svetainę, kuri tau patinka, ir pabandyk atkartoti jos dalį. Ne visą – tiesiog vieną komponentą: navigaciją, kortelę, formą. Tai vienas efektyviausių mokymosi būdų, nes sprendžia realias problemas.
Naudok browser developer tools nuolat. F12 yra tavo laboratorija. Galima tiesiogiai keisti CSS naršyklėje ir matyti rezultatą iš karto – tai neįkainojama mokantis. Kai supranti, kaip atrodo norimą rezultatą, perkelk į kodą.
Išmok skaityti MDN dokumentaciją. Mozilla Developer Network (developer.mozilla.org) yra geriausias HTML ir CSS šaltinis. Pradžioje ji gali atrodyti sudėtinga, bet išmokus ja naudotis, galėsi rasti atsakymą į beveik bet kokį klausimą.
Kurti projektus, ne pratimus. Vietoj to, kad darytum 50 atskirų pratimų, sukurk vieną realų projektą – savo portfolio puslapį, receptų svetainę, ar bet ką, kas tau įdomu. Realūs projektai kelia realias problemas, o sprendžiant realias problemas mokoma greičiausiai.
Svarbu nepamiršti ir prieinamumo (accessibility). Geras HTML ir CSS ne tik gerai atrodo – jis veikia visiems žmonėms, įskaitant tuos, kurie naudoja ekrano skaitytuvus ar klaviatūrą vietoj pelės. Tai reiškia: naudoti semantinius elementus, pridėti alt atributus paveikslėliams, užtikrinti pakankamą spalvų kontrastą, ir įsitikinti, kad interaktyvūs elementai pasiekiami klaviatūra. Tai ne tik etiškai teisinga – tai dažnai ir teisiškai reikalaujama komercinėms svetainėms.
HTML ir CSS nėra „lengvos” technologijos, kaip kartais sakoma. Jos yra prieinamos – galima pradėti greitai ir pamatyti rezultatą iš karto. Bet jų gilumas yra milžiniškas. Net patyrę kūrėjai nuolat atranda naujų dalykų, naujų funkcijų, naujų būdų spręsti senas problemas. Tai yra vienas iš dalykų, kuris daro web kūrimą tokiu įdomiu – visada yra ką mokytis, visada yra kaip tobulėti.
