CSS3 Najlepsze praktyki dla projektantów
Jeśli jesteś przede wszystkim projektantem i niedawno zacząłeś uczyć się CSS, prawdopodobnie zacząłeś włączać niektóre z nowych funkcji CSS, które zostały dodane do języka w CSS3 .
Ale jeśli nie masz dużego doświadczenia z CSS, prawdopodobnie próbujesz dowiedzieć się, jaki jest najlepszy sposób na poradzenie sobie z niektórymi wyzwaniami wynikającymi z używania prefiksów wielu producentów, zajmujących się starszymi wersjami Internet Explorera, oraz inne dylematy specyficzne dla CSS3.
W tym artykule postaram się omówić niektóre ważne kwestie, które należy zapamiętać podczas rozwiązywania tych problemów. Pamiętaj, że nic tu nie jest przesądzone, ale powinny to być wskazówki, które pomogą Ci pisać skuteczniejszy, łatwiejszy w utrzymaniu i przyszłościowy kod.
Poznaj swoje wykresy wsparcia
Prawdopodobnie nie będziesz musiał zapamiętywać, które funkcje działają w jakich przeglądarkach. W większości przypadków funkcje CSS3 nie będą działać we wszystkich przeglądarkach. W niektórych przypadkach nawet najnowsze wersje przeglądarek nie mają pełnej obsługi.
Pierwszą rzeczą, którą powinieneś zrobić, jest zrozumienie, gdzie brakuje wsparcia. Podstawowym zasobem, którego powinieneś użyć, jest Kiedy mogę użyć ... witryna, która zawiera wykresy dla CSS3, HTML5 i ton więcej. Możesz nawet robić porównania z różnymi przeglądarkami, jak pokazano na poniższym zrzucie ekranu porównuje obsługę CSS3 w Firefoksie 3.6 vs. IE9 :
Chociaż Kiedy mogę użyć ... to prawdopodobnie jedyne źródło wykresu wsparcia, którego potrzebujesz, oto kilka innych opcji do rozważenia:
- CSS3 Kliknij Wykres
- Kompatybilność CSS i przeglądarek
- Zgodność z CSS i Internet Explorer
- Porównanie układów graficznych (CSS)
Ale pamiętaj, że chociaż funkcja CSS może być gdzieś wymieniona jako "obsługiwana", nie oznacza to, że jest bez błędów i niespójności. Więc sprawdź dokładnie.
Nie nadużywaj wielozadaniowych
Ze względu na presję klienta lub agencji, lub po prostu fakt, że chcesz, aby wszystko wyglądało i funkcjonowało tak samo wszędzie, możesz ulec pokusie, aby użyć wielu CSS Polyfills .
Ale wiele z tych skryptów może znacznie spowolnić twoje strony - zwłaszcza jeśli używasz więcej niż jednego. Tam są wiele badań i źródeł które pokazują, jak ważna jest szybkość witryny, więc wszelkie produkty do polyfinowania powinny być uważnie rozważane i uwzględniać ogólnie najlepsze interesy Twojej witryny lub aplikacji.
Aby pomóc Ci zdecydować, co polyfillować, a co po prostu pozwolić obniżyć się do mniejszego doświadczenia, skorzystaj z HTML5 teren. Jak pokazano na poniższym przykładowym zrzucie ekranu, HTML5 często zaleca się, aby unikać polyfills dla niektórych funkcji:
Sprawdź, jak funkcje ulegają degradacji
Jeśli unikasz wielu polyfills, naturalnie będziesz musiał pozwolić wielu funkcjom CSS3 pogrążyć się w bardziej prymitywnym stylu w starszych przeglądarkach (zazwyczaj IE6-8). Ale nie zakładaj, że stanie się to automatycznie.
W wielu przypadkach (na przykład przy korzystaniu z wielu środowisk) musisz zadeklarować właściwość, która zostanie zastąpiona przez funkcję CSS3, ale nadal będzie się wyświetlać w starszych przeglądarkach.
Na przykład dla wielu środowisk możesz to zrobić:
.element {background: url(images/fallback.jpg) no-repeat;background: url(images/example.png) center center no-repeat,url(images/example-2.png) top left repeat;}Zwróć uwagę na pojedynczy obraz tła zadeklarowany przed linią wielu obrazów tła. Nieoperacyjne przeglądarki wyświetlają pojedynczy obraz, ale zignorują drugą linię. Obsługujące przeglądarki odczytują obie linie, ale pierwsza linia zostanie zastąpiona drugą.
Niektóre inne funkcje CSS3, które mogą skorzystać z tego typu kreacji zastępczej, to kolory RGBA, kolory HSLA i gradienty.
Aby pomóc Ci zobaczyć, jak funkcja CSS3 pogarsza się w starszych przeglądarkach, możesz użyć skryptozakładki nazwanej deCSS3 .
Obecnie działa tylko w Chrome i Safari, ale po prostu przeciągnij link do paska zakładek, a następnie kliknij link w dowolnej witrynie, w której chcesz "de-CSS3", a zobaczysz witrynę z cieniami tekstowymi, zaokrąglonymi narożnikami i innymi nowe rzeczy zostały usunięte. Oczywiście nie jest to zamiennik dla rzeczywistych testów przeglądarki, ale może służyć jako przydatny przewodnik dla szybszego rozwoju, zanim wykonasz test końcowy do końca projektu.
Innym narzędziem pomagającym w radzeniu sobie z awariami jest Modernizr Biblioteka JavaScript. Ale jeśli jesteś zastraszany przez biblioteki, nie bądź. Modernizator nie jest trudny do rozwiązania z perspektywy CSS. Sprawdzić w tym samouczku dla bezbolesnego wprowadzenia.
Radzenie sobie z przedrostkami dostawców
Jedną z nieuporządkowanych części CSS3 jest radzenie sobie ze wszystkimi prefiksami różnych dostawców. Utrzymywanie kodu używającego wszystkich prefiksów jest uciążliwe, aw niektórych przypadkach nie jest potrzebne wszystkie z nich. Kto może pamiętać, kiedy uwzględnić "-o-" lub "-ms-", a kiedy nie?
Cóż, jak już wspomniano, pomoc przy pomocy wykresów wsparcia. Oto kilka innych sugestii, które pomogą rozwiązać problem z przedrostkami dostawców.
Użyj preprocesora CSS
Preprocesory są teraz w tej chwili wściekłością. Jednak początkujący projektanci i projektanci, którzy nie są programistami lub programistami, mogą mieć problemy z tymi nowymi narzędziami.
Tak więc, chociaż preprocesory z pewnością nie są dla wszystkich, zdecydowanie warto je rozważyć, ponieważ mogą poważnie poprawić czas produkcji i konserwacji.
Obszerna dyskusja na temat preprocesorów jest zdecydowanie poza tym artykułem, ale oto kilka linków, które pomogą Ci zacząć:
A jeśli uważasz, że to zbyt ciężkie, Chris Coyier z CSS-Tricks ma kilka myśli na temat preprocesorów które mogą pomóc w uzyskaniu ogólnego obrazu. I oto jest post na Nettuts + która obejmuje niektóre funkcje i zalety korzystania z kilku najpopularniejszych preprocesorów CSS.
Bądź konsekwentny w swoim kodzie
Jeśli zdecydujesz się nie przetwarzać swojego CSS przy użyciu jednej z wyżej wymienionych technologii, będziesz musiał uporać się z utrzymaniem wszystkich prefiksów dostawcy. Dlatego upewnij się, że wybierasz styl i kolejność dla prefiksów dostawcy i trzymasz się go. W ten sposób Twój kod będzie łatwiejszy do odczytania i konserwacji.
Na przykład niektórzy programiści CSS umieszczają wiersze prefiksu dostawcy w kolejności alfabetycznej i używają wcięć, aby wszystkie wartości były zgodne:
.element {-moz-transition: background-color linear .8s;-ms-transition: background-color linear .8s;-o-transition: background-color linear .8s;-webkit-transition: background-color linear .8s;transition: background-color linear .8s;}To tylko jeden sposób, aby to zrobić. Ale niezależnie od wybranej metody, po prostu zachowuj spójność w całym kodzie. Byłoby to szczególnie ważne, jeśli pracujesz w zespole, w którym inni muszą czytać i / lub utrzymywać twój kod.
Oczywiście, nie wszystkie funkcje CSS3 są tak łatwe do zorganizowania (na przykład kod dla animacji klatek kluczowych jest znacznie bardziej skomplikowany), ale w przypadku większości funkcji powinieneś mieć spójny styl, który sprawia, że tworzenie i konserwacja są bardziej płynne.
A co ze standardową właściwością?
Zauważycie, że w przykładzie z poprzedniej sekcji ostatnia właściwość zadeklarowana po wierszach dostawcy jest standardową wersją właściwości. Jeśli masz zamiar uwzględnić standardową właściwość, to na pewno powinieneś to zrobić. Dlatego zawsze dodawaj go jako ostatni po dodaniu.
Ma to na celu zagwarantowanie, że implementacja funkcji dostawcy zostanie zastąpiona standardową implementacją. Ale tu jest ostrożność.
W przypadku niektórych złożonych animacji i interakcji można sobie wyobrazić, że implementacja może zmienić się tak bardzo, że gdy przeglądarka zacznie obsługiwać standardową właściwość, może mieć niepożądane skutki. Dlatego w niektórych przypadkach lepiej będzie, jeśli całkowicie zrezygnujesz ze standardowej właściwości.
Pisałem o tym temacie bardziej dogłębnie na moim blogu , więc sprawdź to, jeśli chcesz dokładniej omówić ten problem.
Użyj Prefiksu
Jednym z najprostszych sposobów radzenia sobie ze wszystkimi dziwacznościami w różnych przeglądarkach jest użycie małego, poręcznego narzędzia o nazwie Prefixr . Z Prefixr, po prostu rozwijasz swój kod jak zawsze i możesz użyć prefiksu pojedynczego dostawcy (na przykład "-moz-") dla całego twojego CSS3. Następnie, gdy skończysz testowanie w tej jednej przeglądarce i wszystko będzie działać tak, jak chcesz, po prostu wyślij swój kod na prefixr i wygeneruje dla ciebie cały dodatkowy kod dostawcy.
Prefixr również może być zintegrowany automatycznie z edytorem tekstu i obejmuje obsługę długiego kodu animacji klatek kluczowych. Jako alternatywę możesz także wypróbować utworzone przeze mnie narzędzie Kod wypełnienia animacji który dodaje dodatkowy kod dostawcy dla animacji klatek kluczowych.
Testuj dokładnie
Ostatnią propozycją, którą tu dam, jest dokładne przetestowanie we wszystkich przeglądarkach, które obsługujesz. Możesz użyć kilkudziesięciu narzędzi i bibliotek, aby pomóc Ci w rozwoju CSS3, ale nic nie zastąpi dokładnych testów w prawdziwych środowiskach przeglądarki.
Ta rada byłaby szczególnie ważna, gdybyś miał do czynienia z wieloma responsywnymi CSS3 związanymi z projektowaniem (np. Zapytania o media) i intensywnym korzystaniem z funkcji typograficznych. Chcesz, aby Twoje treści były użyteczne i czytelne we wszystkich przeglądarkach, nawet jeśli funkcje CSS3 nie są dostępne.