Az inline CSS az a megoldás, amikor a stílust közvetlenül a HTML-elem style attribútumába írod, külső stíluslap helyett. Például: <div style="color:#c00;padding:16px">, és a szabály csak erre az egy elemre érvényes.
Hogyan működik
A böngésző a HTML-t fentről lefelé dolgozza fel. Az inline szabályt azonnal látja, nem kell hozzá külön fájlt letöltenie. Ez első ránézésre gyors, de a stílus beleég a dokumentumba.
Egy külső .css fájlt a böngésző egyszer tölt le, utána a gyorsítótárból veszi elő. Az inline stílus minden oldalletöltéskor újra átmegy a hálózaton. Tíz aloldalon tízszer.
Mit tesz az oldaladdal
Egy-két style attribútum senkit nem zavar. Százával viszont már látszik a számokon. A riportokban rendszeresen látunk sablonépítővel készült oldalakat, ahol a HTML fele stílusdefiníció.
Ennek két mérhető következménye van:
- nő az HTML-méret, ami lassítja az első bájtok utáni feldolgozást
- romlik a szöveg/HTML arány, mert a hasznos tartalom elvész a kód között
Mikor jogos mégis
Van legitim esete. Az úgynevezett critical CSS, amit a fejlécben lévő <style> blokkba tesznek, pont azért születik, hogy kikerülje a render-blokkoló erőforrásokat. Ez tudatos döntés, és nem style attribútum.
Ugyanígy elfogadott az e-mail-sablon, ahol a levelezőkliensek miatt nincs más választás. Minden más esetben a külső stíluslap a helyes válasz.
Röviden: a style="" attribútum nem hiba, csak drága; ami sok elemen ismétlődik, az osztályba és külső CSS-fájlba való.
Technikai példa
Ugyanaz a doboz kétféleképpen. Az első verzió minden oldalletöltéskor újra utazik, a második egyszer töltődik le és utána gyorsítótárból jön.
<!-- Rossz: a stílus az elemre tapad, nem újrahasznosítható -->
<div style="margin:0 0 24px;padding:16px;border:1px solid #ddd;border-radius:8px">
<h2 style="font-size:20px;color:#222;margin:0 0 8px">Szolgaltatasaink</h2>
<p style="font-size:15px;line-height:1.6;color:#555">Rovid leiras.</p>
</div>
<!-- Jo: osztaly + kulso stiluslap -->
<link rel="stylesheet" href="/assets/app.css">
<div class="card">
<h2 class="card-title">Szolgaltatasaink</h2>
<p class="card-text">Rovid leiras.</p>
</div>
Gyors mérés parancssorból. Az első szám az inline stílusok darabszáma, a második a HTML nyers mérete bájtban.
curl -s https://pelda.hu | grep -o 'style="' | wc -l
curl -s https://pelda.hu | wc -c
Ha a CSS már külső fájlban van, ez a CSP-direktíva 'unsafe-inline' nélkül is működik:
Content-Security-Policy: default-src 'self'; style-src 'self'
Gyakori kérdések
Rontja az inline CSS a Google-rangsorolásomat?
Közvetlenül nem. A Google nem bünteti a style attribútumot. Közvetve viszont számít, mert lassítja a betöltést, és a sebesség rangsorolási tényező. Néhány tucat inline szabály miatt nem fogsz pozíciót veszíteni.
Akkor miért ajánlja mégis a javítást a riport?
Mert olcsó javítás, és több helyen hoz hasznot. Csökken a HTML-méret, gyorsabb az ismételt betöltés, és megnyílik az út a szigorú CSP felé. A hatása alacsony, ezért nem sürgős, de érdemes elvégezni.
A critical CSS is inline CSS-nek számít?
Technikailag beágyazott stílus, de más a célja. A fejlécbe tett <style> blokk azért van ott, hogy az első képernyő azonnal megjelenjen, külső fájlra várás nélkül. Ez tudatos optimalizálás, nem hanyagság. A riport a style attribútumot nézi, nem ezt.
Hány style attribútum a sok?
Nincs hivatalos küszöb. Tapasztalatból 20 alatt nincs mit javítani, 200 felett viszont biztosan sablonépítő vagy generált kód áll mögötte. A HTML teljes mérete a jobb mérőszám: 150 kB felett érdemes megnézni, mi eszi a helyet.
A termékleírásokban is baj, ha van inline stílus?
Ott a leggyakoribb, és ott a legbosszantóbb. A beillesztett formázás gyakran eltér a bolt dizájnjától, és ezer terméknél ezerszer ismétlődik. Illeszd be a szöveget formázás nélkül, és a megjelenést a téma CSS-e adja.
