Rozszerzenia CSS Mozilli

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Dla potrzeb XUL (czyt. "zul"), języka zgodnego z XML, służącego do opisywania interfejsu chociażby Firefox'a Mozilla wprowadziła szereg rozszerzeń CSS.

Zaczynają się one od przedrostka -moz, kończą -jakaś-właściwość. Potrafią całkiem przyjemnie rozszerzyć user experience na stronach, oczywiście pod warunkiem, że użytkownik korzysta z przeglądarki Mozilli. Style z takimi właściwościami przechodzą walidację, bo zaczynają się od przedrostka -moz (tak jak rozszerzenia dla Opery -o).

-moz-border-radius

Jedna z bardziej rozpowszechnionych właściwości. Zastępuje border-radius, które to zaokrągla wszystkie rogi bloku o podaną wartość. Można sterować, który róg ma zostać zaokrąglony, poprzez właściwości -moz-border-radius-[bottom|top][right|left]. Przykład: -moz-border-radius-bottomleft: 8px. Za pomocą tej właściwości zaokrąglimy jedynie obramowanie bloku. Tło określone za pomocą background-color dostosowuje się do nowego obramowania, background-image już nie. Nie można zaokrąglać elementu <img/>, to znaczy tylko zaokrąglimy wcześniej ustawioną właściwość border.

-moz-border-[top|right|bottom|left]-colors

Bardzo przydatne dla określania wielokolorowych krawędzi bloku, bez potrzeby ich zagnieżdżania. Po prostu w tej właściwości wypisujemy kolejno kolory, jakie będą przyjmować poszczególne piksele w obramowaniu, jeśli jest ono większe od 1px. Bez przeszkód i trudności można teraz stworzyć tęczę na obramowaniu. :) Jeśli border-width jest grubsze niż wszystkie wartości tej właściwości, pozostała część obramowania przymuje kolor właściwości border-color. Przykład: -moz-border-bottom-colors: #8C248C #1818B8 red rgb(231,104,0) #F3F30C;

::-moz-selection

Pseudoelement ten (jak widać nie tylko właściwości mogą być naśladowane) zastępuje pseudoelement CSS3 - ::selection. Pozwala ona na określenie właściwości color i background-color dla zaznaczanego tekstu. Pseudoelement można aplikować na różnych elementach, aby uniknąć zlewania się tekstu z tłem (hiperłącza w tekście, wyróżnienie kodu).

Jeśli chodzi o strony internetowe to na tyle. Więcej właściwości można stosować do bardziej zaawansowanych zastosowań niż potrzeba dla WWW, dlatego nie skupiałem się na nich.

Tagi wpisu:

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 16 sierpnia 2005 o 19:12

Kategorie: CSS, Przeglądarki

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Rewolucjonista 1 16 sierpnia 2005, 19:14

nice. pojawi sie u ciebie w nowym skinie ? ;)
riddle 2 16 sierpnia 2005, 19:15

Tia, to "odpadek informacyjny" po tym co robię dla nowego skina. :>
zimaq 3 17 sierpnia 2005, 00:13

No dobra, rozszerzenia fajne, bo i sam stosuje, ale problem pojawia sie gdy weżmiemy pod uwagę, że ponad 75% userów nadal kożysta z IE, a reszta niekoniecznie czegoś opartego o gecko...
Zaokraglanie rogow mozna tez zrobic w oparciu o js'a ( eg. nifty ) ;)
zimny k. 4 17 sierpnia 2005, 08:40

jeszcze jest -moz-opacity - takze calkiem przyjemne (wartosci od 0 do 1)
riddle 5 17 sierpnia 2005, 09:25

Ale po co -moz-opacity, jak opacity (W3C WD) działa. :)
zimny k. 6 17 sierpnia 2005, 09:28

no ale to w kontekscie tych z przedrostkiem -moz ;)
gandalf 7 17 sierpnia 2005, 12:12

Lepiej podlinkuj juz http://developer.mozilla.org/en/docs/Mozilla_CSS_Extensions - to bardziej oficjalny odnosnik :)
riddle 8 17 sierpnia 2005, 12:17

True, true.. dzięki, zrobione.
D4 9 17 sierpnia 2005, 14:41

hmmm, ciekawi mnie ile osób wie, że XUL oznacza ZŁO
Yano 10 18 sierpnia 2005, 00:40

Eghm, gwoli ścisłości przedrostek przed właściwościami CSS jest uwarunkowany nie tyle językiem XUL a wymogami W3C, które to mówią, że wszelkie rozszerzenia CSS powinny być opatrzone stosownym -[cośtam]- zależnym od programu/producenta. Tak więc Mozilla (i inne oparte na Gecko) mają -moz-, Opera ma -o-, a IE powinno mieć swoje -ms- lub -ie-, tylko MS to beton i im nie wytłumaczysz.
Yano 11 18 sierpnia 2005, 00:47

Zabawnie zachowuje się -moz-border-radius w połączeniu z -moz-border[t|r|b|l]-colors ;)
Siergiej 12 18 sierpnia 2005, 21:15

To ciekawe że jak ms robi kolorowe scrollbary to wszyscy kopią go po 4 literach, a jak mozilla zaokrąkla rogi to wszystko jest takie cudowne jak najbardziej ok...
riddle 13 18 sierpnia 2005, 21:39

Bo Mozilla wyprzedza CSS3 i robi to standards-compliance-way? :)