[entrop]

#webdev #css #webprotip

cpecyficzność css - jeśli nie wiecie, jest to metoda pozwalająca na obliczenie, który selektor css będzie miał wyższą wagę. pisanie !important'ów jest bardzo brzydkie, ale większość osób albo nie wie, albo niema konkretnej wiedzy (takiej, na której można w 100% polegać) i tylko podświadomie potrafi powiedzieć, która deklaracja będzie użyta przez przeglądarkę a która nadpisana przez inną

metoda natomiast jest bardzo prosta. w każdym selektorze należy policzyć liczbę wystąpień elementów, klas i idów. elementy są jednostkami, klasy dziesiątkami, a idy setkami. taki selektor:

body #dupa ul.menu-left li.usun-konto a

będzie miał zatem specyficzność

124, bo są:

- 4 elementy (body, ul, li, a)

- 2 klasy (.menu-left, .usun-konto)

- 1 id (#dupa)

więc np.

ul li.usun-konto a.link

będzie brany przez przeglądarkę dopiero później (waga 023), choćby był niżej w pliku css od tamtego.


łatwo zapamiętać i stosować w trudnych przypadkach, polecam.

więcej lektury:

http://css-tricks.com/specifics-on-css-specificity/

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html - dla fanów gwiezdnych wojen :D

[g.....m]

@entrop: a to wszystko i tak o kant dupy można rozbić bo jest Internet Explorer ;)

[entrop]

@grim: tego nie unikniemy, można tylko przeczekać :)

ale raczej z kolejnością nie miał nigdy problemów, raczej ze swoim nastawieniem do specyfikacji w3c

[Marmite]

@entrop: Taki selektor

body #dupa ul.menu-left li.usun-konto a

jest nieoptymalny ;)

[bartov]

@entrop: nie ma*

[Hauleth]

@entrop: Nie pisze się stylów dla #idkow to jest złe i to się powinno plenić!

[entrop]

@Hauleth: osobiście używam idów tylko dla uchwytów dla jsa, dla pewności jeszcze dodaję prefix "js-" w nazwie

[Marmite]

@Hauleth: (#) Dlaczego?

[Hauleth]

@Marmite: Bo ID nie służy do stylowania tylko do określania odnośnika do danego elementu. To tak jak byś określał wygląd domu na podstawie jego adresu.

[Marmite]

@Hauleth: (#) No ale jak będziesz chcieć wystylować konkretny element to przecież łatwiej jest się do niego odnieść właśnie po ID, które go jednoznacznie identyfikuje, niż tworząc długi ciąg selectorów, żeby uniknąć kolizji.