Defensiivinen HTML ja CSS

...

Tämä saattaa olla täysin sopiva säännölliseen kotikäyttöön, mutta kolmannen osapuolen sovellus on täydellinen ei-ei. Syy? Tällaisella yleisluokan nimellä on hyvät mahdollisuudet käyttää vanhemman sivua jo. Jos otat tämän tyylisäännön käyttöön, voit ohittaa olemassa olevan tyyppisen säännön, jonka julkaisija on ottanut käyttöön ja tuhota sivuston ulkoasun. Tai kääntöpuolella sääntö saattaa ohittaa sinun ja muuttaa widgetisi vahingossa.

Ratkaisu? Ehdota kaikki luokan nimesi (ja muut attribuutit) sovelluksellasi yksilöivällä tunnisteella - nimiavaruudelle. Stork-widgetin tapauksessa edellinen merkintä tulisi muuttaa niin, että tämä näyttää:

...

Ajatuksena on, että nimetät JavaScript-koodisi, jotta et julisteta globaaleja objekteja, jotka ovat ristiriidassa vanhemman sivun kanssa käynnissä olevan koodin kanssa. Se ulottuu jokaiseen HTML-osuuteen, jonka syötät sivulle: tunnukset, luokat, tiedot * attribuutit, lomakenimet ja niin edelleen.

Nimienimi HTML ja CSS on välttämätöntä kolmannen osapuolen sovellukselle, joka tuottaa suoraan julkaisijan sivulle. Tämä ei ole välttämätöntä vain ristiriitaisten CSS-sääntöjen estämiseksi. on myös mahdollista, että vanhemman sivulla on JavaScript, joka kysyy DOM: tä elementeistä, joiden tunnistusominaisuudet saattavat sopia omaan. Ole tarkka nimiöissäsi kaiken, mitä laitat DOM: lle.

CSS-spesifisyys

On tärkeää huomata, että vaikka hyödyllinen, HTML- ja CSS-nimesi välitys vain estää tapauksia, joissa julkaisija käyttää tyyliä tai kyselyjä, jotka käyttävät samaa nimeä kuin olet. Valitettavasti widgetisi voi silti olla ristiriidassa emosivun määrittämien tyylien kanssa, vaikka niiden CSS käyttää tunnuksia, luokkien nimeä ja attribuutteja, jotka eivät viittaa suoraan elementteihisi. Tämä johtuu siitä, että selaimen painaa tiettyjä CSS-sääntöjä voimakkaammin ja voi olla etusijalla näennäisesti toisistaan ​​poikkeavista sääntöistä, joita voit määrittää. Tätä ilmiötä kutsutaan CSS-spesifisyydeksi, ja sinun on ymmärrettävä se, ennen kuin voit turvallisesti luoda elementtejä julkaisijan sivulle.

Palataan edellisen osan nimiavaruuksien sisältöön. Oletetaan, että julkaisijan HTML: ssä on huipputasoinen DIV, joka käärii kaiken sisällön ja sivun tunnuksen:

... 
  ... 

Lisäksi sanotaan, että sivulla on seuraava CSS, jossa julkaisija julkaisee ensimmäisen säännön, ja kolmannen osapuolen komentosarjan lisää toinen sääntö, joka kohdistetaan hautakorkkeihin:

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

Nyt, mitä väriä .stork-container on? Vastaus voi järkyttää ja järkyttää sinua: vihreä. Tässä yksinkertaisessa esimerkissä julkaisijan sääntö (# sivun div) on etusijalla kolmannen osapuolen sovellusluokan sääntö (.stork-container). Tämä tapahtuu siksi, että selain painaa sääntöjä, jotka sisältävät korkeammat tunnukset kuin kohdeluokat tai attribuutit.

CSS-sääntöjen prioriteetit

W3C: n CSS-eritelmässä hahmotellaan, miten selaimilla pyritään priorisoimaan eri sääntömallit. Seuraavassa on luettelo näistä sääntötyypeistä, jotka on tilattu korkeimmasta prioriteetista alimpaan:

1. Inline-tyylit (style = "...")
2. tunnukset
3. Luokat, attribuutit ja pseudokurssit (: tarkennus,: hover)
4. Elementit (div, span ja niin edelleen) ja pseudo-elementit (: ennen, jälkeen)

Tämän kaavion mukaan inline-tyylit punnitaan kaikkien seuraavien sääntötyyppien yläpuolella: tunnukset, luokat ja elementit. Tämä jatkuu loogisesti alaspäin luettelossa, jossa tunnisteet ovat etusijalla luokkien ja elementtien yläpuolella ja niin edelleen. Tässä luettelossa on yksi poikkeus: tärkeän avainsanan merkityt ominaisuudet ovat korkein prioriteetti. Huomaa kuitenkin, että tärkeä avainsana koskee yhtä sääntöä olevaa omaisuutta, ei koko sääntöä.

Mitä tapahtuu, kun sinulla on useita saman painoisia CSS-sääntöjä, joista jokainen voi vaikuttaa samaan elementtiin? Katsotaanpa esimerkkiä:

Eat your vegetables!

Mitä luulet, että väriä on? Vastaus voi olla yllättävää: keltainen. Vaikka nämä säännöt ovat kaikki ensisijaisesti luokkakohtaisia, toinen sääntö (.storkcontainer span) pidetään tarkempana kuin ensimmäinen sääntö ja kolmas sääntö (.stork-container .stork-msg), joka on tarkempi kuin toinen sääntö. Miten tämä toimii?

Inline-tyylit ovat kuningas

Mitä tulee CSS-spesifikaatioon, se on. Jos muistat aikaisemmin tässä luvussa, mainitsimme, että inline-tyylien edut ovat harvoin ristiriidassa vanhemman sivun kanssa. Nyt on selvää, miksi: heidät priorisoidaan kaikkien muiden tavallisten CSS-sääntöjen kohdalla (lukuun ottamatta niitä, joilla on tärkeä avainsana). Jos kirjoitat erityisen yksinkertaisen widgetin, ei ehkä ole huono idea käyttää inline-tyylejä; vältät useimmat CSS-spesifisyysongelmat.

Selaimessa käytetään yksinkertaista pisteytysjärjestelmää määritellä, mikä sääntö on ensisijainen. Tietyn säännön osalta jokainen tämän komennon tekijä valitsee tietyn arvon. Nämä arvot summataan erityispistemäärän luomiseksi. Kun useat säännöt vaikuttavat samaan elementtiin, selaimessa verrataan kunkin säännön spesifisyyspistemäärää, ja korkeimman pistemäärän sisältävä sääntö on etusijalla. Jos kyseessä on solmio, viimeinen määritelmä voittaa. Inline style attribuutit: 1000; Tunnukset: 100; luokat, pseudo-luokat ja attribuutit: 10, elementit ja pseudo-elementit: 1.

Joten, katsomalla edelliseen esimerkkiimme, CSS-sääntöihin olisi annettu seuraavat pistemäärät, jolloin selaimen priorisoima pisteytyssääntö on paras: Huomaat nopeasti, etteivät nämä ole tavallisia numeroita. Spesifisyyspiste on itse asiassa lomakkeen tupla (a, b, c, d), jossa arvo on arvokkaampi kuin b, b on arvokkaampi kuin c ja niin edelleen. Tämä tarkoittaa, että yhden inline style -määritteen (1, 0, 0, 0) aiheuttama tyyli on korkeampi spesifisyyttä kuin sääntö, jossa on sata ID-valitsinta (0, 100, 0, 0).

• .stork-container (0,0,1,0-one -luokan valitsin)
• .stork-container span (0,0,1,1-yhden luokan valitsin, yksi elementti valitsin)
• .stork-container .stork-msg (0,0,2,0-kaksi luokkavalitsinta)

Tässä vaiheessa sinun pitäisi olla hyvä käsitys siitä, miten CSS-spesifisyys toimii, ja miksi selaimella priorisoidaan joitain sääntöjä toisten suhteen. Seuraavaksi laitat tämän tietämyksen käyttöön, kun tutkimme joitain CSS: n kirjoittamiseen liittyviä lähestymistapoja, jotka ovat korkeita ristiriitaisten julkaisutyylityyppien edessä.

Overspecifying CSS

Ensimmäinen ja yksinkertaisin tapa kirjoittaa CSS: ää, joka ei ole ristiriidassa julkaisijan sivun kanssa, on ylittää sääntöjensi. Tämä merkitsee ylimääräisten valitsimien ilmoittamista sääntöjemme erityisominaisuuksien lisäämiseksi siten, että selaimessa verrataan sääntöjä emosivulta peräisin olevien sääntöjen mukaan, ne todennäköisesti parantavat tulosta ja asetetaan etusijalle.

Katsotaanpa tätä käytännössä. Harkitse tätä tarkistettua esimerkkiä Stork-widgetteosta, joka urheilussa on kaksi konttielementtiä, joista jokaisella on yksilöllinen tunnus:

Mikon E90 Digital SLR
  "/> 
  $ 599 
  4.3 / 5.0 • 176 arvostelua 

Tämän HTML-koodin mukana oleva CSS voisi sitten näyttää tältä:

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

Kun määrität redundanttisesti molemmat konttitunnukset kaikkien CSS-sääntöjen emävalvojiksi, annat tehokkaasti jokaiselle CSS-säännöllesi erityispiirteet (0,2,0,0). Tämän jälkeen julkaisijan yleinen #sivun sääntö aikaisemmin ei enää ristiriidassa widgetisi kanssa, koska se käyttää vain yhtä tunnusta. Jotkut puhtaasti luokan tai elementtiperusteiset säännöt eivät myöskään ole ristiriidassa, koska ne ovat koko CSS-painoluokan alle ID: n. Vaikka valintatarkoituksia varten on täysin tarpeetonta määritellä toinen tunnuksesi sääntöihisi, tässä se toimii tehokkaana välineenä erityisyyden lisäämiseksi.

Säilytä terveyttäsi CSS-esikäsittelyjärjestelmällä

Ylittämättömän CSS: n kirjoittaminen voi olla todellinen vetovoima: sinun on jatkuvasti kirjoitettava samat tunnukset uudestaan ​​jokaisen CSS-sääntösi osalta. Voit korjata tämän käyttämällä CSS-esiprosessoria, joka laajentaa CSS-kieltä lisäominaisuuksilla, kuten kyky julistaa sisäkkäiset sääntöjen hierarkiat. Esimerkiksi käyttämällä LESS CSS -esiprosessoria voit kirjoittaa seuraavan esimerkin:

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

Nykyään on saatavilla useita suosittuja CSS-esikäsittelyohjelmia, joissa kaikilla on erilaisia ​​ominaisuuksia. Suosituimpia ovat VÄHEMMÄN,Sass ja Kynällä.

Tämän kääntöpuolella tämä esimerkki edellyttää, että widgetisi käyttää ylätason kontteja ID-tunnuksilla, mikä ei ole käytännöllistä widgeteille, jotka voidaan luoda useita kertoja samalle sivulle. Lisäksi se ei ole vielä luodinkestävä: julkaisija voi seurata johdon ja ylittää oman CSS-sääntöjensä, jolloin sama ongelma on ollut aiemmin.

Mutta tämä on epätodennäköinen skenaario, varsinkin kun olet määrittänyt redundanttisesti kaksi tunnusta kussakin säännössä. Vaihtoehtoisesti voit käyttää yhtä, mutta tämä on tietysti herkempi. Tosiasia on, että useimmat julkaisijat käyttävät järkeviä CSS-sääntöjä, ja tällaisten sääntöjen liian monta määrittäminen on yhteensopiva useimpien kanssa.

Overspecifying CSS ei sekoita koodinlaatutyökaluilla

Jos otat tällaisen CSS: n liian epätarkkailemisen, saatat löytää epätodennäköisen vihollisen: työkalut, jotka arvioivat CSS-koodin laatua, kuten CSS-harha, Google-sivunopeus ja Yahoo: n YSlow. Nämä työkalut osoittavat, että teet ylimääräisiä CSS-valitsimia ja neuvoo poistamaan tällaiset valitsimet pienentämään tiedoston kokoa ja parantamaan selainten CSS-suorituskykyä. Valitettavasti näitä työkaluja ei ole suunniteltu kolmannen osapuolen komentosarjoihin, eivätkä ne arvioi kohtuullisesti ylisuurtavien CSS: n hyödyllisyyttä. Kolmannen osapuolen sovellusten ylimitoituksen edut ylittävät ylimääräisen tiedostokoon ja vähäisen suorituskyvyn osumaksi.

Väärin! Tärkeää

Jos tunnet, että ylimääräinen tunnistetiedot tai luokan valitsimet eivät ole riittävän kaukana, voit rikkoa ydinvaihtoehdon: tärkeän avainsanan. Ominaisuudet CSS-säännössä, jossa urheilu! Tärkeä avainsana on etusijalla kaikkein korkeimmista, jopa ylätason tyylistä. Tämä johtuu siitä, että tärkeä avainsana on suunniteltu antamaan selainkäyttäjille varma tapa korvata "tekijän" (julkaisija) tyylit selaimen lisäosien tai sivustokohtaisten tyylien tapauksessa. Voit käyttää väärin! Tärkeää käyttää sitä kaikissa CSS-ominaisuuksissa, ja asettaa ne etusijalle kaikkiin muihin sääntöihin.

Tässä on, kuinka voit käyttää tärkeää avainsanaa yhdellä CSS-sääntöllä:

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

Koska se on per omaisuus, tärkeä avainsana on toistettava näin, mikä voi olla vetovoima pitkällä ja monimutkaisella tyylisivulla. Päinvastoin, voit saada rock-kiinteän joukon tyylitiedostoja, jotka eivät todennäköisesti palauta julkaisijan sivua.

On vielä mahdollista, että kustantaja voi puolestaan ​​käyttää tärkeitä elementtejäsi ja asettaa omat tyylinsä, jolloin he todennäköisesti kohdistavat elementtejäsi räätälöintiin. Toisaalta tämä voi olla turhauttavaa, jos yrität säilyttää yhtenäisen ulkoasun. Jos kuitenkin olet päättänyt sallia kustantajien mukauttaa widgetisi, tämä on todennäköisesti haluttua käyttäytymistä.

Yksi asia on selvää: jakaminen DOM: n kanssa julkaisijan kanssa voi tehdä erityisen vaikeaksi tehdä jatkuvasti tyylistä widgetia. Vaikka voit estää CSS-sääntöjasi ristiriitojen todennäköisyyden vähentämiseksi, julkaisijan on aina mahdollista kohdistaa elementtejä sääntöihin joko vahingossa tai tarkoituksella.

Mutta jos DOM: n jakaminen julkaisijan kanssa aiheuttaa sen, mikä aiheuttaa niin paljon surua, on mahdollista lähettää widgetisi pois DOM: sta? Miksi, kyllä-kyllä ​​voit.

Yhteenveto

Jotta kolmannen osapuolen JavaScript-sovellus, HTML: n ja CSS: n injektio julkaisijan sivulle vaatii enemmän hoitoa kuin jos lisääisit merkintää turvalliseen ympäristöön. Sinun on varmistettava, että kun HTML-sivua tulostetaan sivulle, et hidastuta sivua estotoiminnolla. Sinun on myös otettava huomioon, että käsikirjasi saatetaan sisällyttää useita kertoja samalle sivulle, ja sen pitäisi tehdä useita esimerkkejä gracefully. Lisäksi sinun on valittava optimaalinen tapa pistää CSS julkaisijan sivulle - joko sitomalla kaikki tyylit, lisäämällä linkkielementtejä tai upottamalla CSS-sääntöjä JavaScriptisi.

Mutta vain saada HTML ja CSS sivulle ei riitä. Sinun on tunnustettava, että DOM: lle esitettävät elementit voivat olla ristiriidassa vanhemman sivun kanssa. Sinun on myös otettava huomioon, miten tyylisi voivat olla ristiriidassa julkaisijan määrittelemien nykyisten tyylien kanssa. Voit käyttää useita tekniikoita, joilla vähennät vanhempien tyylien vaikutusta widgetisiisi: ylittämällä CSS-sääntöjäsi tai esittämällä sisältöä iframe-kehyksestä riippumatta siitä, onko kyseessä src-vähemmän iframe tai ulkoista HTML-asiakirjaa.

Mitä tekniikoita käytät CSS: n ja HTML: n tuottamisessa kolmansille osapuolille? Oletko koskaan palannut! Tärkeää? Kerro meille kommentit.

Esitetty kuva / pikkukuva, puolustuskuva kautta Shutterstock.