Defenzivní HTML a CSS

...

To může být dokonale vhodné pro běžnou aplikaci typu stay-at-home, ale pro aplikaci třetích stran je to úplný ne. Důvod? Takové obecné jméno třídy má dobrou šanci, že ji mateřská stránka již využije. Pokud uvedete toto pravidlo stylu, můžete přepisovat existující pravidlo stylu vytvořené vydavatelem a zničit jeho rozvržení stránek. Nebo naopak, jejich pravidlo by mohlo nahradit vaše a zmenšit velikost widgetu neúmyslně.

Řešení? Předpony všech jmen tříd (a dalších atributů) s identifikátorem jedinečným pro vaši aplikaci - jmenný prostor. V případě widgetu Stork musí být předchozí značka změněna tak, aby vypadala takto:

...

Myšlenka spočívá v tom, že jmenujete svůj kód JavaScript, abyste nehlášeli globální objekty, které jsou v konfliktu s kódem spuštěným na nadřazené stránce. Rozšiřuje se na každý kus kódu HTML, který vložíte do stránky: ID, třídy, data- * atributy, názvy formulářů a podobně.

Namespacing HTML a CSS je nezbytná pro všechny aplikace třetích stran, které se zobrazují přímo na stránce vydavatele. To není jen nezbytné pro zabránění konfliktním pravidlům CSS. je také možné, že mateřská stránka obsahuje JavaScript, který dotazuje DOM na prvky, jejichž identifikační vlastnosti mohou odpovídat vašim vlastním. Buďte důslední v názvech o všechno, co dáte na DOM.

Specifika CSS

Je důležité si uvědomit, že ačkoli užitečné, pomenování jmen HTML a CSS zabraňuje pouze případům, kdy vydavatel používá styly nebo dotazy, které odkazují na atributy se stejným názvem jako vaše. Bohužel vaše widget stále může být v rozporu se styly definovanými nadřazenou stránkou, i když jejich CSS používá ID, názvy tříd a atributy, které přímo nesouvisejí s vašimi prvky. Důvodem je to, že některá pravidla CSS váží prohlížeč více a mohou mít přednost před zdánlivě nesouvisejícími pravidly, která byste mohli definovat. Tento jev je označován jako CSS specificita a budete muset pochopit, než budete moci bezpečně vykreslit prvky na stránce vydavatele.

Vraťme se zpět k příkladu kontejneru z předchozí části o jmenných prostorech. Předpokládejme, že HTML vydavatele má DIV nejvyšší úrovně, která obaluje veškerý svůj obsah, s ID stránky:

... 
  ... 

Dále řekněme, že stránka má následující CSS, kde je definováno první pravidlo vydavatelem a druhé pravidlo, které cílí na kontejner s čápou, je přidáno skriptem třetí strany:

/* Publisher */#page div {background-color: green;}/* Camera Stork */.stork-container {background-color: blue;}

Nyní, jakou barvu bude mít stok-kontejner? Odpověď by mohla šokovat a zděšovat vás: zelená. V tomto jednoduchém příkladu má pravidlo vydavatele (#page div) přednost před pravidly třídy třídy aplikací třetí strany (kontejner .stork). K tomu dochází, protože prohlížeč váží pravidla obsahující vyšší ID než ty, které cílí třídy nebo atributy.

Priority pravidel CSS

Specifikace W3C CSS popisuje, jak mají mít prohlížeče prioritu pro různé typy pravidel. Zde je seznam těchto typů pravidel, seřazených od nejvyšší priority k nejnižší:

1. Inline styly (styl = "...")
2. ID
3. Třídy, atributy a pseudo-třídy (: focus,: hover)
4. Prvky (div, span, atd.) A pseudo-prvky (: před,: po)

Podle tohoto grafu jsou inline styly zváženy nad všechny následující typy pravidel: ID, třídy a prvky. Toto pokračuje logicky dolů v seznamu, s prioritou ID vyšší než třídy a prvky atd. Existuje jedna výjimka z tohoto seznamu: vlastnosti označené důležitým klíčovým slovem mají nejvyšší prioritu. Nezapomeňte však, že důležité klíčové slovo ovlivňuje jednu vlastnost v pravidle, nikoliv celé pravidlo.

Co se stane, když máte několik pravidel CSS stejné váhy, z nichž každá by se mohla týkat stejného prvku? Podívejme se na příklad:

Eat your vegetables!

Co je podle vás barva rozpětí? Odpověď může být překvapivá: žlutá. I když jsou všechna pravidla primárně založená na třídách, druhé pravidlo (.storkcontainer span) je považováno za specifičtější než první pravidlo a třetí pravidlo (.stork-container. Stork-msg) je přesnější než druhé pravidlo. Jak to funguje?

Inline styly jsou králem

Z hlediska specifičnosti CSS to znamená. Pokud si vzpomenete na předchozí z této kapitoly, zmínili jsme se o tom, že inline styly mají výhodu, že zřídka konfliktují s nadřazenou stránkou. Nyní je jasné, proč: jsou upřednostňovány před každým jiným typem pravidelného pravidla CSS (s výjimkou těch, které obsahují důležité klíčové slovo). Pokud píšete obzvláště jednoduchý widget, nemusí být špatný nápad používat inline styly; vyhneme se většině konfliktů specifické pro CSS.

Prohlížeč používá jednoduchý bodovací systém, který určuje, které pravidlo má přednost. Pro dané pravidlo má každý volič složený z tohoto pravidla určitou hodnotu. Tyto hodnoty jsou shrnuty tak, aby vytvořily skóre specificity. Pokud více pravidel ovlivňuje stejný prvek, prohlížeč porovná skóre jednotlivých pravidel daného pravidla a pravidlo s nejvyšším skóre má přednost. V případě rovnováhy platí pravidlo, které bylo definováno jako poslední. Inline styl atributy: 1000; ID: 100; třídy, pseudotřídy a atributy: 10, prvky a pseudo-elementy: 1.

Při pohledu zpět na náš předchozí příklad by těmto pravidlům CSS byly přiděleny následující body, přičemž prohlížeč upřednostňuje nejvyšší skóre: rychle si všimnete, že to nejsou obyčejná čísla. Skóre specificity je ve skutečnosti n-tice formy (a, b, c, d), přičemž bytost je cennější než b, b je cennější než c, a tak dále. To znamená, že styl vytvořený jedním atributem inline style (1, 0, 0, 0) má vyšší specifičnost než pravidlo se stovkou voličů ID (0, 100, 0, 0).

• Stoková nádoba (0,0,1,0-jeden volič třídy)
• Rozsah stokového kontejneru (0,0,1,1-jeden volič třídy, volič prvků)
• .stork-container .stork-msg (0,0,2,0 - dva voliče třídy)

V tomto okamžiku byste měli mít dobrou ruku o tom, jak funguje CSS specificita a proč prohlížeč upřednostňuje některá pravidla před ostatními. Dále využijete tyto znalosti, protože zkoumáme některé přístupy k psaní CSS, které stojí vysoko tváří v tvář konfliktním stylům vydavatelů.

Přesměrování CSS

První a nejjednodušší přístup k psaní CSS, který není v rozporu se stránkou vydavatele, je přepsat vaše pravidla. To znamená deklarovat další selektory, které zvýší specifičnost vašich pravidel, takže když prohlížeč porovná vaši pravidla s těmi, které jsou na rodičovské stránce, pravděpodobně budou vyšší skóre a budou mít prioritu.

Podívejme se na to v praxi. Zvažte tento revidovaný příklad kontejneru widget Stork, který nyní sportuje dva kontejnerové prvky, z nichž každý má jedinečné ID:

Mikon E90 Digital SLR
  "/> 
  599 dolarů 
  4.3 / 5.0 • 176 Hodnocení 

Doprovodný CSS pro tento HTML by pak mohl vypadat takto:

#stork-main #stork-container { ... }#stork-main #stork-container .stork-product { ... }#stork-main #stork-container .stork-price { ... }

Tím, že redundantně zadáte oba ID kontejnerů jako rodičovské selektory všech vašich pravidel CSS, efektivně dáváte každému ze svých pravidel CSS minimální skóre specificity (0,2,0,0). Následně bude obecné pravidlo #page stránek vydavatele již dříve konfliktem s vaším widgetem, protože používá pouze jediný identifikátor. Ani žádná pravidla čistě založená na třídách nebo prvcích nebudou konfliktní, protože to jsou celá hmotnostní třída CSS pod ID. Přestože pro účely výběru není úplně nutné specifikovat druhou identifikaci vašich pravidel, funguje zde jako efektivní zařízení pro zvýšení specifičnosti.

Zachovat svůj rozum pomocí CSS preprocesoru

Psaní přeznačených CSS může být skutečné přetahování: musíte neustále přepsat stejné ID znovu a znovu pro každou z vašich CSS pravidel. Tuto chybu můžete napravit pomocí předprocesoru CSS, který rozšiřuje jazyk CSS o další funkce, jako je například schopnost deklarovat vnořené hierarchie pravidel. Například pomocí předzpracování LESS CSS můžete napsat předchozí příklad takto:

#stork-main {#stork-container {.stork-product { ... }.stork-price { ... }}}

V současné době je k dispozici řada populárních preprocesorů CSS, které mají různé sady funkcí. Mezi nejoblíbenější patří MÉNĚ,Sass, a Stylus.

Na druhou stranu tento příklad vyžaduje, aby vaše miniaplikace používaly kontejnery nejvyšší úrovně s ID, což nebude praktické pro miniaplikace, které lze na stejné stránce vykreslit vícekrát. Navíc je to stále neprůstřelné: vydavatel by mohl sledovat vaše vedení a přeorientovat své vlastní pravidla CSS, což vede k stejnému problému, který jste měli předtím.

Ale je to nepravděpodobný scénář, obzvláště proto, že jste v každé z těchto pravidel jednoznačně zadali dvě ID. Můžete také použít jednu, ale samozřejmě to bude zranitelnější. Skutečnost je, že většina vydavatelů používá normální pravidla CSS a přesvědčení, že tato pravidla budou kompatibilní s většinou z nich.

Overspecifying CSS se nemění s nástroji pro kvalitu kódu

Pokud se rozhodnete přejít na váš CSS takhle, můžete najít nepravděpodobného nepřítele: nástroje, které hodnotí kvalitu vašeho CSS kódu, jako je CSS Lint, Google Page Speed ​​a Yahoo YSlow. Tyto nástroje budou znamenat, že děláte redundantní voliče CSS a budou vám doporučeni odstranit takováto volba, abyste snížili velikost souboru a zlepšili výkon CSS prohlížečů. Naneštěstí tyto nástroje nejsou naprogramovány na základě skriptů třetích stran a nedoporučují spolehlivě vyhodnotit užitečnost přeskakování CSS. Výhody dodatečných specifikací pro aplikace třetích stran převáží nadbytečnou velikost souboru a minimální výkonnost.

Zneužívání!

Pokud se domníváte, že přeskakování vašeho CSS s dalšími identifikátory nebo třídami není dostatečně daleko, můžete vypustit jadernou volbu: důležité klíčové slovo. Vlastnosti v pravidlech CSS, které sportují důležité klíčové slovo, jsou nejvyšší ze všech priorit, a to i nad inline styly. Je to proto, že klíčové klíčové slovo bylo navrženo tak, aby poskytlo uživatelům prohlížeče jistý způsob, jak přepsat styly autorů (vydavatelů) v případě pluginů pro prohlížeče nebo stylů specifických pro daný web. Můžete je zneužít! Důležitý tím, že používáte ve všech svých vlastnostech CSS a efektivně je upřednostňujete před všemi ostatními pravidly.

Zde je návod, jak použít důležité klíčové slovo na jediném pravidle CSS:

.stork-price {font-size: 11px !important;color: #888 !important;text-decoration: none !important;display: block !important;}

Jelikož se jedná o jednu nemovitost, důležité klíčové slovo musí být takto opakováno, což se může stát přetahováním dlouhé a složité šablony stylů. Ale na oplátku dostanete rock-solid set stylů, které jsou velmi nepravděpodobné, že budou vynulovány na stránce vydavatele.

Je stále myslitelné, že vydavatel by mohl zase používat! Důležité je zaměřit se na vaše prvky a nastavit vlastní styly. V tomto okamžiku je pravděpodobné, že cíleně zaměřují vaše prvky na přizpůsobení. Na jedné straně to může být frustrující, pokud se snažíte zachovat konzistentní vzhled a pocit. Pokud jste se však rozhodli povolit majitelům stránek přizpůsobit svůj widget, je to pravděpodobně požadované chování.

Jedna věc by měla být jasná: sdílení DOM s vydavatelem může způsobit, že je obzvláště obtížné vykreslovat konzistentně navržený widget. Ačkoli můžete podniknout kroky k tomu, abyste přepsali pravidla CSS, abyste snížili pravděpodobnost konfliktů, je vždy možné, aby vydavatel cílil vaše prvky s jejich pravidly buď náhodně nebo úmyslně.

Ale pokud sdílení DOM s vydavatelem způsobuje tolik smutku, je možné vykreslit svůj widget z DOM? Proč, ano - ano, můžete.

souhrn

Pro aplikaci javascriptové aplikace třetích stran je nutné, aby aplikace HTML a CSS na stránku vydavatele vyžadovala větší péči, než kdybyste přidali značku do "bezpečného" prostředí. Musíte se ujistit, že při výstupu HTML do stránky nezpomalujete stránku blokováním. Musíte také vzít v úvahu, že váš skript může být zahrnuty vícekrát na stejné stránce, a to by mělo dělat více instancí půvabně. Navíc byste měli zvolit optimální metodu pro vkládání CSS do stránky vydavatele - a to buď vložením všech stylů, přidáním prvků odkazu nebo vkládáním pravidel CSS do javascriptu.

Jenomže získání HTML a CSS na stránce nestačí. Musíte si uvědomit, že prvky, které představujete DOM, mohou být v rozporu s nadřazenou stránkou. Také musíte zvážit, jakým způsobem mohou být vaše styly v rozporu s existujícími styly definovanými vydavatelem. Můžete použít řadu technik, jak snížit vliv nadřízených stylů na widget: přesměrováním pravopisů CSS nebo prezentací obsahu za rámcem iframe, ať už je to iframe bez obsahu src nebo ten, který obsahuje externí dokument HTML.

Jaké techniky používáte při výrobě CSS a HTML pro třetí strany? Už se někdy vrátíš na důležitost? Dejte nám vědět v komentářích.

Doporučený snímek / náhled, obranný obraz přes Shutterstock.