Teknike

Stilet inline

Numri i elementeve me atribut style; mbi pesë mjeti e quan të tepërt.

Çfarë është

Stil inline quhet CSS-ja e shkruar drejtpërdrejt te atributi style i një elementi: <div style="color: red; margin: 10px">.

Ai punon dhe nuk është gabim. Por ka dy veti që e bëjnë problematik në sasi: nuk ruhet në cache — udhëton me çdo kërkesë të faqes — dhe ka specifikë më të lartë se çdo rregull në një skedar CSS, prandaj e mbivendos atë pa pyetur.

Për disa përdorime është zgjidhja e duhur: vlera që llogariten në kohë ekzekutimi, si gjerësia e një shiriti progresi. Për gjithçka tjetër, është CSS e shpërndarë në vende ku askush nuk e gjen.

Pse ka rëndësi

Pasoja e parë është te mirëmbajtja. Kur ngjyra e një butoni është e shkruar në dyzet vende të ndryshme, ndryshimi i saj kërkon dyzet ndreqje dhe një prej tyre do të harrohet.

E dyta është te specifika. Një stil inline nuk mbivendoset nga asnjë rregull normal CSS. Zhvilluesi që përpiqet ta ndryshojë shton !important, dhe faqja hyn në një garë ku çdo rregull i ri duhet të jetë më i fortë se i mëparshmi.

E treta është te peshа: stilet inline nuk ruhen kurrë në cache dhe përsëriten te çdo element i ngjashëm. Në një listë me njëqind kartela, i njëjti varg stili udhëton njëqind herë.

E katërta prek sigurinë: një politikë e rreptë Content-Security-Policy i bllokon stilet inline. Nëse faqja varet prej tyre, ose CSP-ja dobësohet me unsafe-inline, ose faqja shpërbëhet.

Si rregullohet

<!-- në vend të kësaj -->
<div style="color:#c00; padding:12px; border:1px solid #eee">Njoftim</div>

<!-- kjo -->
<div class="njoftim">Njoftim</div>

Hapat:

Nxirri te një skedar CSS dhe zëvendësoji me klasa.
Përdor variabla CSS për vlera që përsëriten.
Lëri inline vetëm vlerat e llogaritura në kohë ekzekutimi.
Kontrollo redaktorin e përmbajtjes. Shumë redaktorë WYSIWYG shtojnë style te çdo paragraf; zakonisht kjo çaktivizohet nga konfigurimi.
Nëse do CSP të rreptë, hiqi të gjitha ose përdor nonce.

Si e mat ky mjet

TechnicalAnalyzer::checkInlineStyles() (services/TechnicalAnalyzer.php:131) numëron //*[@style]. Tri dalje: zero (kaluar pa konstatim), 1–5 (:141, informativ), mbi 5 (:143, informativ me tekst tjetër).

Të dyja degët japin konstatim me ndikim të ulët; ndryshon vetëm formulimi.

Çfarë NUK e mat

Numërohen elementet, jo pesha apo dëmi. Një faqe me gjashtë stile të thjeshta raportohet si me "stile të tepërta inline", ndërsa një me pesë stile prej 500 shenjash secili raportohet me tekstin më të butë.

Nuk kontrollohen fare blloqet `<style>` brenda dokumentit, që kanë të njëjtin problem cache-i dhe të njëjtin konflikt me CSP-në, dhe janë zakonisht shumë më të mëdha.

Nuk bëhet dallim midis stileve të shkruara nga njeriu dhe atyre të vendosura nga JavaScript-i pas ngarkimit — ky i dyti nuk shihet fare, sepse matja bëhet mbi HTML-në fillestare.

Nuk shihen as atributet e vjetruara të prezantimit si bgcolor ose align, që bëjnë të njëjtën punë.

Kodi që e kryen matjen

services/TechnicalAnalyzer.php:131 — TechnicalAnalyzer::checkInlineStyles
services/TechnicalAnalyzer.php:143 — many_inline_styles