Varnar HTML og CSS

...

Þetta gæti verið fullkomlega rétt fyrir venjulegt forrit sem er heima hjá þér, en fyrir forrit frá þriðja aðila er það heill nei-nei. Ástæðan? Slík almennt kennitala hefur gott tækifæri til að nota þegar foreldrasíðan er notuð. Ef þú kynnir þessa stíllegla gætir þú hunsað núverandi stílregla sem settar eru af útgefanda og eyðileggja vefútlitið. Eða á regluna gæti reglan þeirra farið framhjá þér og breyttu græjunni óvart.

Lausnin? Forskeyti allar nöfnin í bekknum þínum (og öðrum eiginleikum) með kennimerki sem er einstakt fyrir umsóknina þína - nafnrými. Þegar um Stork búnaðinn er að ræða ætti að breyta fyrri merkingu til að líta svona út:

...

Hugmyndin er sú að þú namespace JavaScript kóðann þinn þannig að þú lýsir ekki yfir alþjóðlegum hlutum sem stangast á við kóða sem keyra á foreldrasíðunni. Það nær yfir hvert stykki af HTML sem þú setur inn á síðuna: kennitölur, kennslustundir, gögn- * eiginleikar, eyðublöð og svo framvegis.

Nafnspace HTML og CSS er nauðsynlegt fyrir hvaða forrit sem er þriðja aðila sem gerir beint á síðu útgefanda. Þetta er ekki bara nauðsynlegt til að koma í veg fyrir andstæðar CSS reglur; Einnig er hugsanlegt að foreldrasíðan sé með JavaScript sem er að spyrja DOM fyrir þætti sem auðkenna eiginleikar gætu samsvarað eigin spýtur. Vertu strangur í namespacing allt sem þú setur á DOM.

CSS sérkenni

Það er mikilvægt að hafa í huga að þó að það sé gagnlegt, nafngiftir HTML og CSS þinn aðeins í veg fyrir tilvik þar sem útgefandi notar stíl eða fyrirspurnir sem tilvísunaraðgerðir með sama nafni og þínu. Því miður getur búnaðurinn þinn ennþá stangast á við stíl sem er skilgreindur af foreldrasíðunni, jafnvel þótt CSS þeirra noti kennimerki, kenninöfn og eiginleika sem ekki vísa beint til þinna. Þetta er vegna þess að nokkrar CSS reglur eru vegin þyngri af vafranum og geta haft forgang yfir því sem virðist ótengdum reglum sem þú gætir skilgreint. Þetta fyrirbæri er nefnt CSS sérkenni, og þú þarft að skilja það áður en þú getur örugglega gert þætti á síðu útgefanda.

Við skulum fara aftur í ílátið frá fyrri hluta nöfnarsvæða. Segðu frá því að HTML-útgefandinn hafi upp á toppinn-DIV sem hylur allt innihald þeirra, með kennimerki síðu:

... 
  ... 

Til viðbótar, segjum að síðunni hafi eftirfarandi CSS, þar sem fyrsta reglan er skilgreind af útgefanda og annar reglan sem miðar á stork-gámur, er bætt við handritið frá þriðja aðila:

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

Nú, hvaða lit mun. Svarið gæti hneykslað og skaðað þig: grænn. Í þessu einföldu dæmi er útgefandi reglan (#page div) forgangsverkefni yfir reglubundna þriðja aðila umsóknarinnar (.stork-container). Þetta gerist vegna þess að vafrinn vegur reglur sem innihalda auðkenni sem eru hærri en þær sem miða á flokka eða eiginleika.

CSS regla forgangsröðun

W3C CSS forskriftin lýsir því hvernig vöfrum er ætlað að forgangsraða mismunandi reglustegundum. Hér er listi yfir þessar reglu gerðir, pantaðir frá hæsta forgangi til lægstu:

1. Inline styles (style = "...")
2. Auðkenni
3. Flokkar, eiginleikar og gervi-flokkar (: fókus,: sveima)
4. Elements (div, span, og svo framvegis) og gerviþættir (: fyrir, eftir)

Samkvæmt þessari töflu eru inline stíll vegin fyrir ofan allar reglubundnar reglur: auðkenni, flokkar og þættir. Þetta heldur áfram rökrétt niður á listann, með auðkenni sem eru forgangsraða hærri en flokkar og þættir og svo framvegis. Það er eitt undantekning á þessum lista: eignir sem eru merktar með mikilvægu leitarorði taka hæsta forgang. En athugaðu að mikilvægu leitarorðið hefur áhrif á eina eign innan reglu, ekki alla regluna.

Hvað gerist þegar þú hefur marga CSS reglur af sömu þyngd, sem hver gæti hugsanlega haft áhrif á sama þætti? Við skulum skoða dæmi:

Eat your vegetables!

Hvað gerðir þú ráð fyrir að liturinn á þekjunni sé? Svarið gæti verið á óvart: gulur. Þrátt fyrir að þessar reglur séu fyrst og fremst í bekknum er annar reglan (.storkcontainer span) talin nákvæmari en fyrsta reglan og þriðja reglan (.stork-container -stork-msg) nákvæmari en seinni. Hvernig virkar þetta?

Inline stíl eru konungur

Hvað varðar CSS sérkenni, þá er það. Ef þú manst frá fyrr í þessum kafla, nefndum við að inline stíll hafi þann ávinning að það sé sjaldan í bága við foreldrasíðuna. Nú er ljóst hvers vegna: Þeir eru forgangsraðar yfir hverja aðra tegund af reglulegu CSS reglu (að undanskildum þeim sem hafa mikilvægt leitarorð). Ef þú ert að skrifa sérstaklega einfalda búnað, gæti verið að það sé ekki slæm hugmynd að nota inline stíl; þú munt forðast flesta CSS sérkenni átök.

Vafrinn notar einfaldan stigakerfi til að ákvarða hvaða regla er forgangsverkefni. Fyrir tiltekinn reglu er hvert val sem skilgreinir þessi regla virði ákveðins gildi. Þessar gildi eru taldar upp til að búa til sérstöðu stig. Þegar margar reglur hafa áhrif á sömu þáttinn samanstendur vafrinn í sérsniðnu stigi hvers reglu og reglan með hæstu stigi tekur forgang. Ef um er að ræða jafntefli er reglan sem var skilgreind síðast unnið. Inline stíl eiginleika: 1000; Kennitölur: 100; flokkar, gervi-flokkar og eiginleikar: 10, þættir og gerviþættir: 1.

Þannig að horfa til baka í fyrra dæmi okkar, þá hefði þessi CSS regla verið úthlutað eftirfarandi stigum, þar sem hæsta punkta reglan er forgangsraða af vafranum: Þú munt fljótt taka eftir að þetta eru ekki venjulegir tölur. Sérstök skora er í raun túpa formsins (a, b, c, d), með því að vera verðmætari en b, b vera verðmætari en c, og svo framvegis. Það þýðir að stíll sem stafar af einum inline stíl eiginleiki (1, 0, 0, 0) hefur meiri sértækni en regla með hundrað ID vali (0, 100, 0, 0).

• .Torkur ílát (0,0,1,0-einn flokkur val)
• .Tilboðsgeymir (0,0,1,1-einn flokkarvalbúnaður, einir þátttakandi)
• .Stork-gámur. Stork-msg (0,0,2,0-tveir flokkar)

Á þessum tímapunkti ættir þú að hafa góðan hönd á því hvernig CSS sérkenni virkar og af hverju vafrinn forgangsraðar nokkrum reglum yfir aðra. Þú verður næstum að setja þessa þekkingu í notkun, þar sem við skoðum nokkrar aðferðir við að skrifa CSS sem er hátt í ljósi andstæða útgefanda stíll.

Yfirfæra CSS

Fyrsta og einfaldasta nálgunin við að skrifa CSS sem er ekki í bága við síðu útgefanda er að overspecify reglurnar þínar. Þetta þýðir að lýsa yfir fleiri valmönnum til að auka sérstöðu reglna þinna, þannig að þegar vafrinn samanstendur reglunum þínum gegn þeim frá foreldrasíðunni, eru þeir líklegri til að skora hærra og vera forgangsraða.

Skulum líta á þetta í reynd. Íhugaðu þetta endurskoðaða dæmi um Stork græjutílinn, sem nú er íþróttaþáttur í tveimur ílátum, hver með einstakt auðkenni:

Mikon E90 Digital SLR
  "/> 
  $ 599 
  4,3 / 5,0 • 176 Umsagnir 

Meðfylgjandi CSS fyrir þessa HTML gæti þá líkt svona:

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

Með því að tilgreina báðar auðkenni gáma sem foreldrarvalar allra CSS reglna ertu í raun að gefa hvert CSS reglurnar þínar lágmarks sérstöðu stig (0,2,0,0). Síðan mun almenna # síðu reglunnar frá fyrr ekki lengur stangast á við búnaðinn þinn, því það notar aðeins eitt auðkenni. Hvorki munu allir eingöngu flokkar eða einingar sem byggjast á reglum stangast á, því að þeir eru heilir CSS þyngdaflokkur fyrir neðan ID s. Jafnvel þó að það sé óþarft að tilgreina annað auðkenni fyrir reglurnar þínar, þá virkar það sem skilvirkt tæki til að auka sérstöðu.

Varðveisla þinn sanity með CSS preprocessor

Að skrifa overspecified CSS getur verið alvöru draga: þú verður að stöðugt umrita sömu auðkenni aftur og aftur fyrir hverja einustu CSS reglurnar þínar. Þú getur leyst þetta með því að nota CSS preprocessor, sem nær CSS tungumálinu með viðbótarþáttum eins og hæfileikanum til að lýsa yfir nested hierarchies of rules. Til dæmis, með því að nota LESS CSS preprocessor, gætir þú skrifað fyrra dæmi eins og þetta:

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

Nokkrar vinsælar CSS preprocessors eru í boði í dag, sem allir hafa mismunandi eiginleika. Meðal vinsælustu eru LESS,Sass, og Stíll.

Á forsíðunni, þetta fordæmi krefst þess að búnaðurinn þinn noti hágæða gáma með auðkenni, sem ekki eru hagnýtar fyrir búnað sem hægt er að gera mörgum sinnum á sömu síðu. Auk þess er það enn ekki bulletproof: útgefandi gæti fylgst með forystu þinni og yfirfært eigin CSS reglur, sem leiðir til sama vandamáls sem þú áttir áður.

En þetta er ólíklegt atburðarás, sérstaklega þar sem þú hefur óþarfi tilgreint tvö auðkenni í hverju reglunum. Þú gætir líka notað einn, en þetta mun auðvitað verða viðkvæmari. Staðreyndin er sú að flestir útgefendur nota sanna CSS reglur og overspecifying reglurnar þínar eins og þetta mun vera í samræmi við flestir þeirra.

Yfirsýnandi CSS blandast ekki við gæði gagna í kóða

Ef þú tekur til að overspecify CSS þín svona, gætir þú fundið ólíklegt óvin: verkfæri sem meta gæði CSS kóðans, eins og CSS Lint, Google Page Speed ​​og Yahoo YSlow. Þessar verkfæri munu benda til þess að þú gerir óþarfa CSS-valmöguleika og þeir ráðleggja þér að fjarlægja slíkar valmöguleika til að draga úr skráarstærð og bæta CSS árangur í vafra. Því miður eru þessi verkfæri ekki forrituð með hugbúnaði þriðja aðila í huga, og ekki metin nokkuð gagnsemi gagnvart CSS. Ávinningur af overspecification fyrir forrit þriðja aðila mun vega þyngra en auka skráarstærð og minni árangur.

Móðgandi! Mikilvægt

Ef þú telur að overspecifying CSS þinn með auka auðkenni eða kennara í bekknum fer ekki nógu langt, getur þú brotið út kjarnorkuvalkostinn: mikilvægt leitarorð. Eiginleikar innan CSS reglu sem íþróttum mikilvægu leitarorðinu eru forgangsraða mest af öllu, jafnvel yfir inline stíl. Þetta er vegna þess að mikilvægu leitarorðið var hannað til að gefa notendum vafra áreiðanlegan hátt til að hunsa "höfundar" (útgefandi) stíl, ef um er að ræða vafraforrit eða svæðisbundnar stíll. Þú getur misnotað! Mikilvægt með því að nota það á öllum CSS eiginleikum þínum með því að forgangsraða þeim á öllum öðrum reglum.

Hér er hvernig þú gætir notað mikilvægu leitarorðið á einni CSS reglu:

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

Þar sem það er á eignum, þarf nauðsynlegt leitarorð að endurtaka eins og þetta, sem getur orðið dregið yfir langa og flókna stíll. En í skiptum, þú færð rokkhljómt sett af stílheftum sem eru mjög ólíklegt að endurstilla á síðu útgefanda.

Það er enn hugsanlegt að útgefandi gæti síðan notað! Mikilvægt að miða á þætti og setja eigin stíl, þar sem þeir eru líklega með einbeitingu að því að einbeita sér að þínum þörfum. Annars vegar getur það verið pirrandi ef þú ert að reyna að viðhalda stöðugu útliti og tilfinningu. En ef þú hefur ákveðið að leyfa útgefendum að sérsníða búnaðinn þinn, þá er þetta líklega óskað hegðun.

Eitt ætti að vera skýrt: að deila DOM með útgefanda getur gert það sérstaklega erfitt að gera stöðugt stíll búnaður. Þó að þú getir gripið til ráðstafana til að overspecify CSS reglurnar til að draga úr líkum á átökum er það alltaf hægt fyrir útgefanda að miða á þætti með reglum sínum, annaðhvort með tilviljun eða með viljandi hætti.

En ef deila DOM með útgefanda er það sem veldur svo miklum sorg, er hægt að láta búnaðinn þinn af DOM? Hvers vegna, já-já þú getur.

Yfirlit

Fyrir JavaScript forrit þriðja aðila, þarf að gefa HTML og CSS inn á síðu útgefanda meira umönnun en ef þú varst að bæta merkingu við "öruggt" umhverfi. Þú verður að ganga úr skugga um að þegar þú sendir HTML út á síðuna, þá hægir þú ekki niður á síðunni með lokunaraðgerð. Þú verður einnig að íhuga að handritið þitt gæti verið innifalið mörgum sinnum á sömu síðu og það ætti að gera mörg dæmi ánægjulega. Að auki ættir þú að velja besta aðferð til að sprauta CSS inn á síðu útgefanda, annaðhvort með því að fella inn allar stíll þínar, bæta við tengiliðareiningum eða embed in CSS reglur í JavaScript.

En bara að fá HTML og CSS á síðunni er ekki nóg. Þú verður að viðurkenna að þættir sem þú kynnir fyrir DOM geta komið í bága við foreldrasíðuna. Þú verður einnig að íhuga hvernig stíll þín gæti stangast á við núverandi stíl skilgreind af útgefanda. Þú getur notað ýmsar aðferðir til að draga úr áhrifum foreldrisstíl á búnaðinum þínum: með því að yfirfæra CSS reglurnar þínar eða kynna efnið þitt á bak við iframe, hvort sem það er src-less iframe eða eitt sem inniheldur utanaðkomandi HTML skjal.

Hvaða tækni notar þú þegar þú framleiðir CSS og HTML fyrir þriðja aðila? Ert þú alltaf að falla aftur á! Mikilvægt? Láttu okkur vita í athugasemdunum.

Valin mynd / smámynd, vörnarmynd um Shutterstock.