WDD
“>
element, który działa jak kontener. Robi to poprzez ustawienie jawnej szerokości i wysokości, skutecznie ograniczając obszar zajmowany przez Twój widget. Nadałeś temu
prosta nazwa klasy, container, która pasuje do reguły stylu w towarzyszącym jej pliku CSS:
…
To może być całkowicie odpowiednie dla zwykłej aplikacji do pozostawania w domu, ale dla aplikacji innej firmy jest to całkowicie niedopuszczalne. Powód? Taka ogólna nazwa klasy ma duże szanse być już używana przez stronę nadrzędną. Jeśli wprowadzisz tę regułę stylu, możesz zastąpić istniejącą regułę stylu wprowadzoną przez wydawcę i zepsuć układ jego witryny. Albo, z drugiej strony, ich reguła może zastąpić Twoją i przypadkowo zmienić rozmiar Twojego widżetu.
Rozwiązanie? Dodanie do wszystkich nazw klas (i innych atrybutów) identyfikatora unikalnego dla Twojej aplikacji — przestrzeni nazw. W przypadku widżetu Stork poprzednie oznaczenie powinno zostać zmienione, aby wyglądało tak:
…
Pomysł polega na tym, aby nadać przestrzeni nazw kodowi JavaScript, aby nie deklarować obiektów globalnych, które kolidują z kodem działającym na stronie nadrzędnej. Rozszerza się to na każdy fragment kodu HTML wstawianego na stronę: identyfikatory, klasy, atrybuty data-*, nazwy formularzy itd.
Przestrzenie nazw HTML i CSS są koniecznością dla każdej aplikacji innej firmy, która renderuje bezpośrednio na stronie wydawcy. Nie jest to konieczne tylko w celu zapobiegania konfliktom reguł CSS; możliwe jest również, że strona nadrzędna ma JavaScript, który przeszukuje DOM pod kątem elementów, których właściwości identyfikujące mogą odpowiadać Twoim. Bądź rygorystyczny w przestrzeniach nazw wszystkiego, co umieszczasz w DOM.
Specyfika CSS
Ważne jest, aby pamiętać, że chociaż pomocne, namespace’owanie kodu HTML i CSS zapobiega jedynie przypadkom, w których wydawca używa stylów lub zapytań, które odwołują się do atrybutów o tej samej nazwie co Twoje. Niestety, Twój widżet może nadal kolidować ze stylami zdefiniowanymi przez stronę nadrzędną, nawet jeśli ich CSS używa identyfikatorów, nazw klas i atrybutów, które nie odwołują się bezpośrednio do Twoich elementów. Dzieje się tak, ponieważ niektóre reguły CSS są bardziej ważone przez przeglądarkę i mogą mieć pierwszeństwo przed pozornie niezwiązanymi regułami, które możesz zdefiniować. To zjawisko nazywa się specyfiką CSS i musisz je zrozumieć, zanim będziesz mógł bezpiecznie renderować elementy na stronie wydawcy.
Wróćmy do przykładu kontenera z poprzedniej sekcji o przestrzeniach nazw. Załóżmy, że HTML wydawcy ma DIV najwyższego poziomu, który otacza całą jego zawartość, z ID strony:
Dodatkowo załóżmy, że strona ma następujący kod CSS, gdzie pierwsza reguła jest zdefiniowana przez wydawcę, a druga reguła, odnosząca się do stork-container, jest dodana przez skrypt innej firmy:
/* Wydawca */
#strona div {
kolor tła: zielony;
}
/* Bocian z kamerą */
.bocian-pojemnik {
kolor tła: niebieski;
}
A jaki kolor będzie miał .stork-container? Odpowiedź może Cię zaszokować i przerazić: zielony. W tym prostym przykładzie reguła wydawcy (#page div) ma pierwszeństwo przed regułą klasy Twojej aplikacji innej firmy (.stork-container). Dzieje się tak, ponieważ przeglądarka wyżej waży reguły zawierające identyfikatory niż te, które są ukierunkowane na klasy lub atrybuty.
Priorytety reguł CSS
Specyfikacja W3C CSS opisuje, w jaki sposób przeglądarki mają priorytetyzować różne typy reguł. Oto lista tych typów reguł, uporządkowana od najwyższego do najniższego priorytetu:
- Style inline (style=”…”)
- Identyfikatory
- Klasy, atrybuty i pseudoklasy (:focus, :hover)
- Elementy (div, span itd.) i pseudoelementy (:before, :after)
Zgodnie z tym wykresem style inline są ważone ponad wszystkimi kolejnymi typami reguł: identyfikatorami, klasami i elementami. Logicznie rzecz biorąc, jest to kontynuowane w dół listy, przy czym identyfikatory są priorytetyzowane wyżej niż klasy i elementy itd. Istnieje jeden wyjątek od tej listy: właściwości oznaczone słowem kluczowym !important mają najwyższy priorytet. Należy jednak pamiętać, że słowo kluczowe !important wpływa na pojedynczą właściwość w ramach reguły, a nie na całą regułę.
Co się dzieje, gdy masz wiele reguł CSS o tej samej wadze, z których każda mogłaby potencjalnie wpłynąć na ten sam element? Przyjrzyjmy się przykładowi:
Zjedz swoje warzywa!
Jaki jest Twoim zdaniem kolor span? Odpowiedź może być zaskakująca: żółty. Mimo że wszystkie te reguły są oparte głównie na klasach, druga reguła (.storkcontainer span) jest uważana za bardziej szczegółową niż pierwsza reguła, a trzecia reguła (.stork-container .stork-msg) jest bardziej szczegółowa niż druga. Jak to działa?
Style inline są królem
Jeśli chodzi o specyfikę CSS. Jeśli pamiętasz z wcześniejszej części tego rozdziału, wspomnieliśmy, że style inline mają tę zaletę, że rzadko kolidują ze stroną nadrzędną. Teraz jest jasne, dlaczego: są one priorytetowe w stosunku do każdego innego typu zwykłej reguły CSS (z wyjątkiem tych ze słowem kluczowym !important). Jeśli piszesz szczególnie prosty widget, użycie stylów inline może nie być złym pomysłem; unikniesz większości konfliktów specyfikacji CSS.
Przeglądarka używa prostego systemu punktacji, aby określić, która reguła ma pierwszeństwo. Dla danej reguły każdy selektor składający się na tę regułę ma określoną wartość. Wartości te są sumowane, aby utworzyć wynik specyficzności. Gdy wiele reguł wpływa na ten sam element, przeglądarka porównuje wynik specyficzności każdej reguły, a reguła z najwyższym wynikiem ma pierwszeństwo. W przypadku remisu wygrywa reguła, która została zdefiniowana jako ostatnia. Atrybuty stylu inline: 1000; ID: 100; klasy, pseudoklasy i atrybuty: 10, elementy i pseudoelementy: 1.
Tak więc, patrząc wstecz na nasz poprzedni przykład, tym regułom CSS przypisano by następujące wyniki, przy czym reguła o najwyższym wyniku byłaby priorytetowo traktowana przez przeglądarkę:Szybko zauważysz, że nie są to zwykłe liczby. Wynik specyficzności jest w rzeczywistości krotką w formie (a, b, c, d), gdzie a jest bardziej wartościowe niż b, b jest bardziej wartościowe niż c itd. Oznacza to, że styl wywołany przez pojedynczy atrybut stylu inline (1, 0, 0, 0) ma wyższą specyficzność niż reguła ze stu selektorami ID (0, 100, 0, 0).
- .stork-container (0,0,1,0 — jeden selektor klasy)
- .stork-container span (0,0,1,1 — jeden selektor klasy, jeden selektor elementu)
- .stork-container .stork-msg (0,0,2,0 — dwa selektory klasy)
W tym momencie powinieneś mieć dobre pojęcie o tym, jak działa specyfika CSS i dlaczego przeglądarka priorytetowo traktuje niektóre reguły nad innymi. Następnie wykorzystasz tę wiedzę, gdy będziemy badać podejścia do pisania CSS, które będą się wyróżniać w obliczu sprzecznych stylów wydawcy.
Nadmierne określanie CSS
Pierwszym i najprostszym podejściem do pisania CSS, które nie koliduje ze stroną wydawcy, jest nadspecyfikowanie reguł. Oznacza to deklarowanie dodatkowych selektorów w celu zwiększenia szczegółowości reguł, tak aby gdy przeglądarka porówna Twoje reguły z regułami ze strony nadrzędnej, prawdopodobnie uzyskają one wyższy wynik i zostaną potraktowane priorytetowo.
Przyjrzyjmy się temu w praktyce. Rozważmy ten poprawiony przykład kontenera widżetu Stork, teraz zawierającego dwa elementy kontenera, każdy z unikalnym ID:
Mikon E90 lustrzanka cyfrowa
http://camerastork.com/img/products/1337-small.png”/>
599 dolarów
4.3/5.0 • 176 opinii
Towarzyszący kod CSS dla tego kodu HTML mógłby wyglądać następująco:
#bocian-główny #bocian-pojemnik { … }
#stork-main #stork-container .stork-product { … }
#stork-main #stork-container .stork-price { … }
Nadmiarowo określając oba identyfikatory kontenerów jako selektory nadrzędne wszystkich reguł CSS, skutecznie nadajesz każdej z reguł CSS minimalny wynik specyficzności (0,2,0,0). Później ogólna reguła #page wydawcy z wcześniejszej wersji nie będzie już kolidować z Twoim widżetem, ponieważ używa tylko jednego identyfikatora. Żadne reguły oparte wyłącznie na klasach lub elementach również nie będą kolidować, ponieważ są one całą klasą wagową CSS poniżej identyfikatorów s. Chociaż w celach selekcji całkowicie zbędne jest określanie drugiego identyfikatora dla reguł, tutaj działa to jako skuteczne narzędzie do zwiększania specyficzności.
Zachowaj zdrowy rozsądek dzięki preprocesorowi CSS
Pisanie przesadnie określonego CSS może być prawdziwą udręką: musisz ciągle przepisywać te same identyfikatory dla każdej z reguł CSS. Możesz temu zaradzić, używając preprocesora CSS, który rozszerza język CSS o dodatkowe funkcje, takie jak możliwość deklarowania zagnieżdżonych hierarchii reguł. Na przykład, używając preprocesora LESS CSS, możesz napisać poprzedni przykład w ten sposób:
#bocian-główny {
#pojemnik-bocian {
.stork-product { … }
.stork-price { … }
}
}
Obecnie dostępnych jest wiele popularnych preprocesorów CSS, z których każdy ma różne zestawy funkcji. Do najpopularniejszych należą: MNIEJ, Bezczelność, I Rysik.
Z drugiej strony, ten przykład wymaga, aby Twój widget używał kontenerów najwyższego poziomu z identyfikatorami, co nie będzie praktyczne w przypadku widgetów, które mogą być renderowane wielokrotnie na tej samej stronie. Ponadto, nadal nie jest to niezawodne: wydawca mógłby pójść za Twoim przykładem i nadmiernie określić własne reguły CSS, co doprowadziłoby do tego samego problemu, który miałeś wcześniej.
Ale to mało prawdopodobny scenariusz, zwłaszcza że w każdej z reguł określiłeś redundantnie dwa identyfikatory. Możesz alternatywnie użyć jednego, ale to oczywiście będzie bardziej podatne. Prawda jest taka, że większość wydawców używa rozsądnych reguł CSS, a nadmierne określanie reguł w ten sposób będzie zgodne z większością z nich.
Nadmierne określanie CSS nie idzie w parze z narzędziami do oceny jakości kodu
Jeśli zaczniesz nadmiernie precyzować swój kod CSS w ten sposób, możesz natknąć się na mało prawdopodobnego wroga: narzędzia, które oceniają jakość kodu CSS, takie jak CSS Lint, Google Page Speed i Yahoo’s YSlow. Te narzędzia wskażą, że tworzysz zbędne selektory CSS i zalecą usunięcie takich selektorów w celu zmniejszenia rozmiaru pliku i poprawy wydajności CSS przeglądarek. Niestety, te narzędzia nie są programowane z myślą o skryptach innych firm i nie oceniają uczciwie przydatności nadmiernego precyzowania kodu CSS. Korzyści wynikające z nadmiernego precyzowania dla aplikacji innych firm przeważą nad dodatkowym rozmiarem pliku i niewielkim spadkiem wydajności.
Nadmierne używanie !ważne
Jeśli uważasz, że nadspecyfikowanie CSS dodatkowymi selektorami ID lub klas nie wystarczy, możesz skorzystać z opcji jądrowej: słowa kluczowego !important. Właściwości w ramach reguły CSS, które zawierają słowo kluczowe !important, mają najwyższy priorytet, nawet wyższy niż style inline. Dzieje się tak, ponieważ słowo kluczowe !important zostało zaprojektowane, aby dać użytkownikom przeglądarek pewny sposób na nadpisanie stylów „autora” (wydawcy) w przypadku wtyczek przeglądarek lub stylów specyficznych dla witryny. Możesz nadużywać !important, używając go we wszystkich swoich właściwościach CSS, skutecznie nadając im priorytet nad wszystkimi innymi regułami.
Oto jak można użyć słowa kluczowego !important w pojedynczej regule CSS:
.cena-bociana {
rozmiar czcionki: 11px !ważne;
kolor: #888 !ważne;
dekoracja tekstu: brak !ważne;
wyświetlacz: blok !ważne;
}
Ponieważ jest to właściwość, słowo kluczowe !important musi być powtarzane w ten sposób, co może stać się uciążliwe w przypadku długiego i złożonego arkusza stylów. Jednak w zamian otrzymujesz solidny zestaw arkuszy stylów, które bardzo mało prawdopodobne są resetowane przez stronę wydawcy.
Nadal jest możliwe, że wydawca mógłby z kolei użyć !important do kierowania elementami i ustawiania własnych stylów, w którym to momencie prawdopodobnie celowo kierowałby elementy do dostosowywania. Z jednej strony może to być frustrujące, jeśli próbujesz zachować spójny wygląd. Ale jeśli zdecydowałeś się zezwolić wydawcom na dostosowywanie widżetu, jest to prawdopodobnie pożądane zachowanie.
Jedno powinno być jasne: dzielenie się DOM z wydawcą może szczególnie utrudnić renderowanie spójnego widżetu. Chociaż możesz podjąć kroki, aby nadmiernie określić swoje reguły CSS, aby zmniejszyć prawdopodobieństwo konfliktów, zawsze istnieje możliwość, że wydawca będzie kierował Twoje elementy swoimi regułami, przypadkowo lub celowo.
Ale jeśli dzielenie się DOM z wydawcą jest tym, co powoduje tyle problemów, czy możliwe jest renderowanie widżetu poza DOM? Ależ tak — tak, można.
Streszczenie
W przypadku aplikacji JavaScript innej firmy wstrzykiwanie kodu HTML i CSS na stronę wydawcy wymaga większej ostrożności niż dodawanie znaczników do „bezpiecznego” środowiska. Musisz upewnić się, że podczas wyprowadzania kodu HTML na stronę nie spowalniasz jej poprzez operację blokowania. Musisz również wziąć pod uwagę, że Twój skrypt może zostać uwzględniony wiele razy na tej samej stronie i powinien renderować wiele wystąpień płynnie. Ponadto powinieneś wybrać optymalną metodę wstrzykiwania kodu CSS na stronę wydawcy — albo poprzez wstawianie wszystkich stylów, dołączanie elementów linku, albo osadzanie reguł CSS w kodzie JavaScript.
Ale samo umieszczenie HTML i CSS na stronie nie wystarczy. Musisz zdać sobie sprawę, że elementy, które wprowadzasz do DOM, mogą kolidować ze stroną nadrzędną. Musisz również rozważyć, w jaki sposób Twoje style mogą kolidować z istniejącymi stylami zdefiniowanymi przez wydawcę. Możesz użyć wielu technik, aby zmniejszyć wpływ stylów nadrzędnych na swój widżet: poprzez nadmierne określanie reguł CSS lub prezentowanie swojej zawartości za iframe, niezależnie od tego, czy jest to iframe bez źródła, czy taki, który zawiera zewnętrzny dokument HTML.
Jakich technik używasz, produkując CSS i HTML dla osób trzecich? Czy kiedykolwiek korzystasz z !important? Daj nam znać w komentarzach.
Wyróżniony obraz/miniaturka, obraz obronny poprzez Shutterstock.
