Utrzymywanie znaczników kodu CSS3 Slim
Twórcy stron internetowych mogą zaoszczędzić dużo czasu dzięki bardziej zaawansowanej składni CSS3. Użytkownicy, którzy odwiedzają Twoją stronę, oczekują najszybszego możliwego czasu ładowania - co sprawia, że jesteś odpowiedzialny za zmniejszenie rozmiaru plików. Istnieje wiele skrótów z CSS, a zwłaszcza z nowym modelem CSS3.
Złożyłem kilka z tych pomysłów w poniższym przewodniku. Powinniśmy również dotknąć innych obszarów, takich jak zmniejszenie kodu CSS. Dostępne są narzędzia w przeglądarce, aby pomóc programistom w procesie stylizacji, ale chciałbyś połączyć skróty z tym zmniejszeniem rozmiaru pliku, aby ostatecznie usprawnić proces renderowania swojej witryny.
Podstawowe wskazówki dotyczące formatowania
Zanim przejdziemy do rzeczywistej składni CSS, chcę omówić temat w jaki sposób napisać swój CSS. Jeśli znasz trochę projektowanie stron internetowych, prawdopodobnie widziałeś już wcześniej arkusz stylów, prawdopodobnie więcej niż raz. Pierwsza część każdego polecenia nazywa się selektor. Jest to typ elementu, który otrzyma style dodane w nawiasach klamrowych, znany również jako nieruchomości.
Poziom wewnętrzny
W przypadku stylów inline każda właściwość jest zapisywana jedna po drugiej, ze spacjami, aby je rozdzielić. Ta metoda jest najlepiej stosowana na selektorach, gdzie potrzebujesz tylko kilku właściwości. Pozwoli to zaoszczędzić miejsce na stronie i przewijanie arkusza stylów będzie znacznie szybsze. W przypadku, gdy nigdy wcześniej nie napotkałeś wbudowanego CSS, dodałem mały przykład poniżej kierujący do linków zakotwiczenia HTML.
a color: # 648cc8; waga czcionki: pogrubiona; a: hover color: # 739cda; dekoracja tekstowa: brak; a.alt color: # bd4949! important;
Poziom bloku
Z drugiej strony właściwości blokowe są wprowadzane w jednej linii na parę klucz / wartość i często są wcięte w celu szybszej edycji podczas skanowania kodu. Około 99% czystszych arkuszy stylów, z którymi korzystam, korzysta z tego formatowania i stało się standardem branżowym dla wielu projektantów. Jeśli twój selektor używa więcej niż 6 lub 7 właściwości, jest to najlepsze formatowanie do zastosowania.
Biorąc pod uwagę wiele nowych właściwości CSS3, zdajesz sobie sprawę, jak szybko wypełnią się twoje arkusze stylów. Wiele z tych właściwości obsługuje kopie specyficzne dla przeglądarki, które wymagają prawie zduplikowanych wpisów kodu (takich jak promień granicy). Możesz sprawdzić mój przykład właściwości bloku ustawionej poniżej, skierowanej na przykładowy wrapper div.
.wrap display: block; padding: 6px 10px; background: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
Żaden sposób pisania CSS nie jest szczególnie lepszy od drugiego. Ostatecznie jest to Twój wybór jako programisty, który styl preferujesz, a nawet będzie to zgodne z projektem, nad którym pracujesz. Często nawet znaleźć CSS, w którym projektanci wymieszali oba te elementy! Osobiście to czuję “prace w toku” z blokowymi stylami są zwykle łatwiejsze, ponieważ stale sprawdzam arkusz stylów, aby wprowadzać zmiany lub dodatki. Ale w przypadku domen o dużym natężeniu ruchu pomniejszenie pliku CSS jest absolutnie najlepszym sposobem.
Utrzymywanie ich szczupłych
Dzięki wykorzystaniu wielu krótkich kodów dostępnych w CSS3 można zaoszczędzić dużo czasu na programowanie. Edycja elementów HTML stanie się dużo łatwiejsza, gdy zrozumiesz ten oszczędzający czas żargon. Dodatkowo twój kod będzie wyglądał na bardziej przejrzysty i łatwiejszy do obejrzenia.
Jedynym minusem jest to, że nie wszystkie przeglądarki w pełni obsługują te właściwości. Istnieją obejścia wielu istniejących problemów, takich jak Internet Explorer i Netscape. Na szczęście sieć zawsze się rozwija, a wraz z rosnącą popularnością CSS3, niewątpliwie będziemy również odczuwać wzrost kompatybilności z przeglądarką.
RGBa Color Transparency / Opacity
Nowa wartość RGBavalue nie jest dokładnie CSS3 własność, ale przezroczystość alfa jest specyficzna tylko dla CSS3. Zamiast zwykłych wartości „Czerwonego zielonego niebieskiego” przekazujesz za kolor, który możesz teraz zawierają czwartą opcję przezroczystości kolorów. Z tego powodu programiści stron internetowych wykonują niemal całkowicie przezroczyste pliki PNG.
Podstawowa składnia wymaga wartości od 0-255 w pierwszych trzech (3) gniazdach i 0-1.0 w pozycji alfa. Zakres kolorów jest specyficzny dla tego, ile z każdego odcienia (RGB) jest widoczne, a 0 jest niczym, a 255 pełne.
/ ** składnia ** / background: rgba (nazwa_wartości, nazwa_wartości, nazwa_wartości, nazwa_wartości, wartość_przezroczności); / ** przykład ** / div tło: rgba (255, 255, 255, 0,3);
Kompatybilność między przeglądarkami
Kolejna nieruchomość nieprzezroczystość może być używany w pewnych okolicznościach. Jednak wpłynie to na cały element HTML i zawartość wewnętrzną, a nie tylko tło, jak widziałeś w moim przykładzie.
Niestety Internet Explorer nie obsługuje jeszcze wartości kolorów RGBa. Zasadniczo powinieneś dołączyć właściwość awaryjną z pełnym kryciem dla mniej standardowych przeglądarek. Ustawiasz to z tymi samymi wartościami, ale wyłączając 4 (krycie). Wyglądałoby to jak coś rgba (255, 255, 255)
Dodatkowo Internet Explorer może być obsługiwany nieco lepiej dzięki warunkowym warunkom. W rzeczywistości możesz sprawdzić, czy przeglądarka uruchamia IE, i wyświetlić zastrzeżony filtr Microsoft CSS na polecenie. Pokazałem to w poniższym przykładzie (zauważ, że pojawiłoby się to gdzieś w twoim pliku HTML):
CSS3 Border Radius
Przeczytałem kilka mylących wątków na forum dotyczących tworzenia zaokrąglonych granic w CSS3 - nie tyle po stronie tego, jak to się robi, ale dzięki doskonałej obsłudze przeglądarki, programiści WWW starają się, aby najłatwiejszy kod wpadł i działał zgodnie z oczekiwaniami.
/ ** składnia ** / border-radius: górny lewy górny prawy dolny prawy dolny lewy;
The promień graniczny właściwość ma podobną składnię do tworzenia standardowej ramki, z wyjątkiem tego przypadku, że celujemy w narożniki pola. Ta właściwość faktycznie akceptuje wartości 1-4, a każda z nich ma inną konfigurację narożników.
- 1 wartość: Wszystkie cztery rogi są zaokrąglone do tej samej wartości
- 2 wartości: Pierwsza wartość dotyczy
lewy górnyiprawy dolnypodczas gdy druga wartość uderzaw prawym górnym roguina dole po lewej - 3 wartości: Pierwszy odnosi się do
lewy górnyróg, drugi to obana dole po lewej&w prawym górnym rogupodczas gdy trzecia i ostatnia wartość są stosowane doprawy dolny - 4 wartości: Wszystkie 4 wartości dotyczą narożników w następującej kolejności: górny lewy, górny prawy, dolny prawy, dolny lewy
/ ** przykład ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
W powyższym kodzie używamy promień graniczny zastosować zaokrąglony efekt 4px na wszystko oprócz prawy dolny obramowanie, które otrzymuje wygładzoną krzywą 8px. Jeśli to zauważyłeś, oba te kody faktycznie zastosują ten sam efekt stylu.
Kompatybilność między przeglądarkami
Teraz głównym problemem jest to promień graniczny jest obsługiwany tylko w kilku przeglądarkach. Internet Explorer 9 niedawno dodał świetne wsparcie, a Opera również to wyrenderuje. Jednak nawet Opera stworzyła własną własność -o-border-radius kierowanie na ich specyficzny silnik przeglądarki. do tego -moz-border-radius jest obsługiwany przez oprogramowanie Firefox / Gecko i -webkit-border-radius dla Google Chrome / Safari.
Poniższy kod jest przykładem mojego nagiego szablonu do tworzenia zaokrąglonych narożników z największą globalną obsługą przeglądarki.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Innym naprawdę niesamowitym aspektem CSS3 jest wsparcie dla pudełko i cienie tekstowe. To był taki problem dla programistów w przeszłości, ponieważ jedyną realistyczną opcją były obrazy tła. Ta składnia faktycznie ma krótszą rolę, która jest znacznie łatwiejsza niż inne właściwości, które omówiliśmy. Na początku trudno jest zapamiętać prawidłową kolejność kluczowych wartości - ale im więcej praktyki wprowadzisz, tym łatwiej się stanie.
Niestety Internet Explorer po raz kolejny jest dziwny. Każda inna główna przeglądarka, w tym Firefox, Google Chrome, Safari i Opera, w pełni obsługuje cień tekstu własność. Programiści próbowali zbudować własne wsparcie IE, ale nadal są bardzo ograniczone. Podstawowa składnia jest zapisana w następujący sposób:
/ ** składnia ** / tekst-cień: przesunięcie w osi x przesunięcie y kolor promienia rozmycia; / ** example ** / div text-shadow: 2px 2px 1px # 111;
Przesunięcie X i Y informuje przeglądarkę, jak daleko od prawej i dolnej strony powinien pojawić się cień. Możesz użyć wartości ujemnych, aby odpowiednio ustawić cień nad i nad lewym. Ale wydaje się to bardzo niewygodne, więc polecam pozytywne liczby całkowite. Również wartość promienia rozmycia może być użyta do wygładzenia sztywnych krawędzi, jeśli cień tekstu wydaje się nienaturalny.
Ta składnia po prostu zagląda do podstawowej notacji podczas tworzenia pojedynczego efektu cienia. Wysoce zaawansowani projektanci nauczyli się nawet tworzyć wiele cieni jednocześnie! Odnoszę się do tego niesamowitego posta na blogu z kwietnia 2011 r., Który bardzo szczegółowo opisuje nakładanie cieni tekstu. Jeśli masz czas, przejrzyj zawartość, aby zorientować się w bardziej zaawansowanych funkcjach i pamiętaj, aby dodać ją do zakładek w przyszłości.!
Kompatybilność między przeglądarkami
Największym przeciwnikiem, na który wpadamy, jest Internet Explorer. Raz po raz Microsoft wypchnął własny silnik renderujący przeglądarki, który w najlepszym razie osiągnął wynik poniżej normy. Teraz, nawet gdy CSS3 bierze pod uwagę cienie tekstowe, IE wciąż pozostaje w tyle. Jest świetna strona demo, w której znajdziesz przykłady kodu i tradycyjne komentarze warunkowe CSS.
Zasadniczo chcesz sprawdzić, czy przeglądarka, którą uruchamia użytkownik, pasuje do dowolnej wersji przeglądarki Internet Explorer 9 lub niższej. Następnie za pomocą filtrów MS możemy zastosować cień do dowolnego elementu tekstowego (powyżej używamy akapitu).
Łagodne przejścia
CSS3 przejście to najgorętsza nieruchomość na rynku designu od czasów babci! Projektanci stron internetowych robią takie zamieszanie na temat czystych przejść CSS, mimo że wsparcie jest ograniczone głównie do przeglądarek Webkit. Możesz oczywiście używać drugorzędnych właściwości dla Mozilli i Opery i tym podobnych. Ale notacja stenograficzna jest naprawdę wciągająca, szczególnie jeśli jesteś przeciwny animacjom JavaScript z jakiegokolwiek powodu.
Najpierw spójrzmy na oryginalną właściwość przejścia. Będzie to wymagało 4 wartości, które można również podzielić na same właściwości. Odpowiadają one zmianie własność(jaki jest efekt), Trwanie(jak długo to wyciąga), funkcja czasowa(zmiany prędkości w stosunku do animacji) i opóźnienie(liczba sekund oczekiwania przed animacją).
/ ** składnia ** / przejście: opóźnienie funkcji czasu trwania właściwości; / ** example ** / img właściwość przejścia: krycie; czas trwania przejścia: 2s; funkcja czasowa przejścia: łatwość wejścia; opóźnienie przejścia: 0,5s;
Powinieneś intuicyjnie zrozumieć cel większości tych właściwości, z wyjątkiem funkcji synchronizacji. Chociaż na początku jest to mylące, ta właściwość po prostu animuje twoje przejście w inny sposób, aby efekt zaczął się wolniej, kończył wolniej lub coś podobnego.
W3 Schools ma dokument funkcji pomiaru czasu online, który zawiera listę wszystkich możliwych wartości, które można wypróbować. Ciągle odnajduję Googling dla tych przewodników, ale robią takie przydatne zakładki.
Kompatybilność między przeglądarkami
Teraz uruchommy pełną obsługę przeglądarki. Domyślnie właściwość przejścia to tylko obsługiwane przez nowsze wersje Safari. Jednak wielu użytkowników nadal wymaga -webkit prefiks, który dotyczy również Google Chrome i podobnych silników renderujących. Poniżej znajduje się “sfinalizowane” szablon bloku kodu Zalecam zapisywanie i używanie, jeśli potrzebujesz obsługi przejścia z większości przeglądarek internetowych.
img przejście: łatwość krycia 2s 1s; -webkit-transition: łatwość krycia 2s 1s; / * chrome, safari, flock * / -moz-transition: łatwość 1s w przezroczystości 2s; / * mozilla + gecko * / -o-transition: łatwość 1s w przezroczystości 2s; / * opera * /
Efekty obrysu tekstu
Ta właściwość nie jest ogromna i nie znajdziesz dziś wielu projektantów stron internetowych. Ale możesz użyć skok tekstu zbudować naprawdę fajne efekty za pomocą czcionek. Przeglądarki Webkit, takie jak Safari i Chrome, są jedynymi prawdziwymi zwolennikami tej właściwości. Opera i Firefox mają trudności z renderowaniem obiektów tekstowych z tymi samymi zarysami.
/ ** składnia ** / p -webkit-text-stroke: width color; / ** example ** / p -webkit-text-stroke: 1px # 222;
Kompatybilność między przeglądarkami
Jeśli czujesz potrzebę zastosowania efektów obrysu tekstu, zawsze powinieneś dołączyć kolor kopii zapasowej. Mozilla i Opera mogą sobie poradzić, jednak użytkownicy Internet Explorera nie mają innych opcji. Niestety jest to jedna z nowszych właściwości CSS3, która nie uzyskała wystarczającego wsparcia ze strony społeczności programistów przeglądarki. Powinieneś poświęcić trochę czasu na zabawę z tym wspaniałym narzędziem internetowym stworzonym specjalnie do budowania tych konturów tekstu CSS3.
Rozmiar pudełka
Właściwość rozmiaru ramki zapewnia większą kontrolę nad całkowitą szerokością / wysokością dowolnego elementu bloku. Domyślnie szerokość / wysokość + granica + margines + dopełnienie tworzą całkowity rozmiar pudełka. Jednak użycie obramowania na treści powoduje wypchnięcie wszystkich dopełnień i marginesów wewnętrzny aby zachować szerokość dokładnie taką samą. Ta właściwość ma tylko dwie wartości, z pole zawartości domyślnie.
div width: 550px; padding: 9px; wielkość pudełka: obramowanie; / * szerokość pozostanie na 550px * /
Jak można sobie wyobrazić, przyda się to w pewnym momencie podczas kariery w CSS. Wypełnienie i marginesy mogą być prawdziwym bólem, a po dodaniu obramowań tracisz śledzenie pikseli.
Kompatybilność między przeglądarkami
Opera i IE 8 domyślnie obsługują tę nową właściwość. IE7 i niżej utknęły z ustawieniami pola zawartości, chyba że użytkownicy używają trybu dziwactwa. Jedyne dodatki, które powinieneś wiedzieć o konkretnie ukierunkowanych silnikach przeglądarek webkit i Mozilli.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: ramka; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /
Czyste kolumny CSS3
Kolumny są nieco skomplikowane w CSS3, ale można je uzyskać przy minimalnym kodzie. Są 2 właściwości, na których chcesz się skupić liczba kolumn i luka kolumnowa. Liczba odnosi się do całkowitej liczby kolumn, które chcesz zastosować, podczas gdy luka tworzy margines między nimi.
div # cols liczba kolumn: 3; gap-gap: 10px;
W moim przykładzie widzimy, że ID #cols są używane jako kontener. Wewnątrz dzielimy div na 3 kolumny z odstępem 10px pomiędzy każdym. Dalej możesz ustawić szerokość kolumny który jest używany do ustawienia całkowitej szerokości każdej kolumny, zamiast wyświetlania stałej liczby.
Kompatybilność między przeglądarkami
Wszystko przed IE8 po prostu nie będzie mogło skorzystać z tej właściwości. Ale jak widzieliśmy na każdym przykładzie, Mozilla i Webkit oferują własne rozwiązania dla wielu przeglądarek. Jeśli potrzebujesz szablonu, sprawdź mój mały przykładowy kod poniżej:
div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; liczba kolumn: 3; przerwa w kolumnie: 7px;
Custom @ font-face
Musieliście słyszeć o ekscytacji związanej z niestandardowymi czcionkami CSS3. Korzystając z właściwości @ font-face, możemy importować zewnętrzne style czcionek i używać ich tak, jak każdej innej rodziny. Składnia jest nieco zawiła i będziesz musiał poświęcić trochę czasu na jej poprawne. Blok dla @ font-face służy do zdefiniowania nazwiska, a następnie możesz użyć tego w swoim rodzina czcionek właściwości wszędzie!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Tylko Internet Explorer * / Widzisz powyżej, że nie celuję w żaden konkretny typ czcionki, ale składnia jest tym, co powinno się wyróżniać. Zauważ, że Internet Explorer obsługuje tylko .eot typy czcionek, póki .ttf i .otf są popularne opcje dla innych przeglądarek. Ważne jest również, abyś rozumiał, że możesz przekazywać adresy URL czcionek z bezpośrednich linków, tj. url („https://www.hongkiat.com/css3/fonts/myfont.ttf”);
Nie ma prawdziwego problemu z przeglądarką w tej konfiguracji, ponieważ wszystkie silniki renderujące mogą analizować te typy plików czcionek. Pamiętaj tylko, że w przypadku wsparcia IE musisz dołączyć wersję eot oraz oryginał. Uważam, że artykuł W3 Schools zawiera katalog najważniejszych informacji, które należy sprawdzić.
Konwersja do miniaturowego CSS
Ten temat jest często dyskutowany, ponieważ służy innym celom dla każdego projektu. Z jednej strony programiści spędzają dużo czasu na pisanie swoich arkuszy stylów. Nie ma możliwości zaszyfrowania tego typu danych jawnego tekstu i ukrycia go przed podglądaniem oczu. Jeśli próbujesz powstrzymać innych przed rażącym kradzieżą twojego kodu, najlepiej możesz zaśmiecać style i usuwać wszystkie podziały wierszy / spacje.
Ten proces może być oznaczony jako miniaturyzacja Twój kod. Zwykle programiści piszą CSS w standardowym formacie, a następnie usuwają wszystkie białe znaki przed przesłaniem ich na serwer WWW. Następnie masz lokalną kopię do szybkiej edycji, a także mniejszą wersję projektu na żywo. Ta metoda może oczywiście przydać się do zmniejszenia obciążenia strony wraz z zatrzymywaniem hakerów kodu.
Link, który zamieściłem powyżej, prowadzący do Minify CSS, ma wspaniałe materiały do czytania na ten temat. Witryna udostępnia również narzędzie do przeglądania, które usuwa takie białe znaki i zwroty klucza z kodu. Kompresor CSS to kolejna opcja z prostym interfejsem, który działa bezpośrednio w przeglądarce internetowej. Słyszałem też dobre rzeczy o Clean CSS, chociaż sam nigdy nie korzystałem z aplikacji.
powiązane linki
Abyś mógł się rozwijać, udostępniłem sześć przydatnych linków z całej sieci. Obejmują one nie tylko stenograficzną notację, ale także pomocne przewodniki i samouczki do uzyskania dostępu podczas ćwiczenia tego nowego skróconego kodu CSS.
- Przewodnik dla początkujących do CSS3
- CSS Shorthand Guide
- Czy używasz odpowiednio CSS3?
- Zawartość CSS i wykres zgodności przeglądarki
- CSS3 + Progressive Enhancement = Smart Design
- Kompletny indeks właściwości CSS / CSS3
Wniosek
Potrzeba dużo poświęcenia i ćwiczenia pisania kodu CSS, aby stworzyć konkretny harmonogram, który można śledzić dla każdego projektu. Większość projektantów stron internetowych chętnie wybiera nowe projekty i pomysły, więc na pewno znajdziesz czas na ćwiczenie tych przydatnych wskazówek dotyczących kodowania. Spróbuj skopiować mały arkusz referencyjny dla własnej wygody, na wypadek gdybyś nie mógł znaleźć żadnych ściągawek lub nawet gorzej, stracisz połączenie z Internetem!
Czy znasz inne przydatne właściwości CSS3 lub skróty? Chcielibyśmy usłyszeć twoje myśli i pomysły w komentarzach do dyskusji. Twórcy stron internetowych naciskają na większą standaryzację w W3C i wyraźnie przejście jest coraz łatwiejsze. CSS3 zapewnia fantastyczne korzyści i jeśli potrafisz opanować stenograficzne kodowanie, utrzyma to niskie rozmiary plików i powstrzyma naśladowców przed kradzieżą Twojego kodu.
