Składnia wielu środowisk - CSS-Tricks

Anonim

Przeglądarki obsługujące wiele tłów (WebKit od samego początku, Firefox 3+) używają następującej składni:

#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )

Są to wartości oddzielone przecinkami i może ich być tyle, ile chcesz, z różnymi adresami URL, pozycjonowaniem i powtarzanymi wartościami. Możesz nawet łączyć gradienty WebKit w mieszankę:

#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )

Stara szkoła IE na Macu wyświetlałaby pierwsze tło na liście, ale inne przeglądarki, które go nie obsługują, zawodzą i po prostu nie wyświetlają tła. To sprawia, że ​​trudno jest zastosować stopniowe ulepszanie. To znaczy, chyba że użyjesz narzędzia takiego jak Modernizr, aby wykryć wsparcie dla tego i napisać selektor rezerwowy, który deklaruje tylko jedno tło dla przeglądarek, które go nie obsługują.