oryginal: Efficient CSS with shorthand properties
translated by: janek
Otrzymuję wiele pytań dotyczących CSS od ludzi, którzy nie są tak zakręceni, żeby spędzać godziny przy pracy z moim CSS-em. Czasami proszą mnie o zerknięcie na czyjąś pracę, by sprawdzić, czemu coś nie działa w taki sposób, jaki oczekiwano. Kiedy już zajrzę w ich CSS-y, często okazują one się napuchnięte i źle zorganizowane.
Jednym z powodów używania CSS przy projektowaniu stron jest zmiejszanie ilości kodu HTML, wysyłanego do gościa witryny. Aby zapobiec przerzuceniu "spuchniętego" HTML-a do "spuchniętego" CSS-a, powinieneś pilnować, żeby rozmiar twoich CSS-ów był jak najmniejszy. Pomyślałem, że opiszę moje ulubione sztuczki efektywnych CSS-ów - skrócone właściwości. Pomimo tego, że większość webmasterów wie o nich i niektórych z tych skrótów używa, to wielu nie w pełni wykorzystuje ich możliwości.
Trochę podstaw
Skrócone właściwości mogą być użyte w celu ustalenia kilku właściwości jednocześnie - za pomocą jednej deklaracji, zamiast używania oddzielnej deklaracji dla każdej własności. Jak zobaczysz, może to zachować dużo miejsca w twoich CSS-ach.
Dostępnych jest dość sporo skróconych właściwości - po więcej informacji sugeruję przejrzeć specyfikacje CSS W3C dla tła, ramek, koloru ramek, stylu ramek, stron ramek (border-top, border-right, border-bottom, border-left), grubości ramek, fontów, stylu list, marginesów, obramowania i dopełnienia.
Kolory
Najpowszechniejszym sposobem określania kolorów w CSS, jest używanie postaci szesnastkowej (heksadecymalnej): hash (#) i po nim sześć cyfr. Możesz też użyć do tego słów, albo zapisu RGB, ja jednak używam tylko wartości heksadecymalnych. Jednym dobrym (a przez wielu nieznanym) skrótem jest to, że kiedy na zapis koloru składają się trzy pary szesnastkowych cyfr, możesz ominąć po jednej z każdej pary:
#000000 staje się #000, #336699 staje się #369.
Wymiary boksów
Właściwości dotyczące rozmiarów boksów mają taką samą składnię - skrócone, mają oddzielane spacjami wartości od pierwszej do czwartej:
- właściwość:wartość1;
- właściwość:wartość1 wartość2;
- właściwość:wartość1 wartość2 wartość3;
- właściwość:wartość1 wartość2 wartość3 wartość4;
To, które strony boksu będą określane przez które wartości, zależy od tego, ile tych wartości określiłeś. Tak to działa:
- Jedna wartość: wszystkie strony;
- Dwie wartości: góra i dół, prawo i lewo;
- Trzy wartości: góra, prawo i lewo, dół;
- Cztery wartości góra, prawo, dół, lewo
Dobrym sposobem na zapamiętanie, która wartość określa którą stronę, jest spojrzenie na tarczę zegara. Początek o 12 (góra), potem 3 (prawo), 6 (dół) i 9 (lewo). Sposób ten znalazłem w znakomitej książce Erica Meyera - CSS według Erica Meyera.
Marginesy i dopełnienia
Używanie skrótów dla tych właściwości pozwoli zaoszczędzić wiele miejsca. Dla przykładu: żeby zastosować różne marginesy dla wszystkich stron boksu, mogłeś użyć tego:
1em;
0;
2em;
0.5em;
Ale efektywniej jest tak:
1em 0 2em 0.5em;
Składnia do określania dopełnienia (padding) jest taka sama.
Ramki
Ramki są trochę bardziej skomplikowane - mogą też mieć definiowany styl i kolor. Aby element miał jednopikselową zwykłą (solid) czarną ramkę ze wszystkich stron, mogłeś użyć następujących reguł:
border-width:1px;
border-style:solid;
border-color:#000;
Bardziej zwartym sposobem jest tutaj użycie skróconego określania ramek:
border:1px solid #000;
Zawsze określam właściwości ramek w takiej kolejności:
border:width style color;
Większość przeglądarek nie zwraca uwagi na tę kolejność (co według specyfikacji jest prawidłowe), ale nie widzę przeciwskazań żeby używać innej kolejności niż ta ze specyfikacji W3C. Zawsze jest przecież możliwość, że jakaś przeglądarka może zbyt sztywno trzymać się kolejności w skróconych wartościach.
Taką samą składnię można użyć ze skróconymi wartościami dla: border-top, border-right, border-bottom i border-left, żeby określić pojedyncze strony boksów.
Nie musisz określać wszystkich trzech wartości. Każda pominięta jest ustawiana na jej początkową wartość - medium dla width, none dla style i wartość color elementu dla color.
To, jak szeroka jest wartość medium zależy od przeglądarki.
Zwróć uwagę, że początkową wartością dla style jest none, więc jeśli chcesz by ramka była w ogóle widoczna, to musisz określić wartość style.
Właściwości border-width, border-style i border-color używane w pierwszym przykładzie powyżej, są właściwościami skróconymi. Ich dłuższe wersje są bardzo rzadko używane:
border-width:1px 2px 3px 4px;
jest skrótem dla
border-top:1px;
border-right:2px;
border-bottom:3px;
border-left:4px;
Skróty dla border-style i border-color używają tej samej, co border-width, składni (kolejność jak rozmiary boksów).
Korzystanie z różnych skrótów dla określania ramek może również oszczędzić ci dużo pisania, kiedy chcesz by element miał różne ramki z różnych stron. Te deklaracje odpowiadają za prawą i dolną krawędź, która ma być ciągła (solid), czarna i gruba na jeden piksel:
border-right:1px solid #000;
border-bottom:1px solid #000;
To samo może też być zadeklarowane tak:
border:solid #000;
border-width:0 1px 1px 0;
- najpierw ramki na wszystkich stronach otrzymują identyczny styl, i wtedy ustalane są różne ich grubości.
Tła
Następną bardzo użyteczną skróconą właściwością jest background (tło). Zamiast background-color, background-image, background-repeat, background-attachment i background-position, aby określić tło elementu wystarczy skorzystać z samego background.
background-color:#f00;
background-image:u rl(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
może zostać skrócone do
background:#f00 u rl(background.gif) no-repeat fixed 0 0;
Tak jak i z właściwościami ramek, tak i tu kolejność wartości nie powinna mieć na nic wpływu, jednak słyszałem, że wczesne wersje Safari mają problemy, kiedy wartości są w innej kolejności niż używana w specyfikacji W3C:
background:color image repeat attachment position;
Pamiętaj, że kiedy ustalasz dwie wartości dla position, one muszą pojawić się jedna bezpośrednio po drugiej - gdy używasz do tego jednostek albo wartości procentowej, określ najpierw położenie w poziomie.
Tak jak i przy właściwościach border i border sides (strony ramki), nie musisz podawać wszystkich wartości. Jeśli ominąłeś którąś, użyta jest wartość początkowa:
- color: transparent
- image: none
- repeat: repeat
- attachment: scroll
- position: 0% 0%
Oznacza to, że bezcelowe jest skorzystanie ze skróconych właściwości tła, kiedy nie podaje się wartości color lub image, gdy tak zrobisz tło i tak będzie przezroczyste.
Prawie zawsze używam skrótów dla ustalania samego koloru tła elementu, przecież background:#f00; jest tym samym co background-color:#f00;
Nie zapomnij, że będzie to usuwać obrazki tła ustalone w poprzedzających regułach. Rozważ tę sytuację:
p {
background:#f00
u rl(image.gif) no-repeat;
}
div p {
background:#0f0;
}
Wszystkie paragrafy, które nie są umieszczone w div-ach będą mieć w tle obrazek - zaś tam gdzie on nie pokryje tła, będą czerwone. Natomiast każdy paragraf zawarty w div-ie będzie miał zielone tło i nie będzie posiadał obrazka w tle.
Fonty
Podobnie jak background, też i font (czcionka) może określać kilka oddzielnych właściwości:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
140%;
"Lucida Grande",sans-serif;
Powyższe może zostać skrócone do:
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
Ponownie, kiedy dochodzi do kwestii kolejności wartości, nie widzę powodu by nie używać tej podanej przez W3C. Przezorny zawsze ubezpieczony.
Przy używaniu skróconych właściwości fontów, możesz opuścić każdą wartość oprócz font-size i font-family - obecność tych dwóch wartości jest obowiązkowa (i do tego w takiej kolejności). Początkowe wartości dla nich:
- font-style: normal
- font-variant normal
- font-weight normal
- font-size: medium
- normal
- zależnie od przeglądarki
Listy
Skróconą właściwością dla list uporządkowanych i nieuporządkowanych jest list-style. Osobiście używam jej do ustawiania wartości list-style-type na none, która to wartość usuwa punktory lub znaki wyliczania.
list-style:none;
zamiast tego:
list-style-type:none;
Możesz również używać tego, by zmieniać wartości list-style-position i list-style-image. Tak więc żeby określić nieuporządkowane listy, które posiadają punktor - obrazek - wewnątrz listy, a kiedy ten obrazek jest niedostępny zamiast niego wstawiające kwadrat, to te dwie reguły będą powodować taki właśnie efekt:
list-style-type:square inside u rl(image.gif);
które jest skróconą wersją
list-style-type:square;
list-style-position:inside;
list-style-image:(image.gif);
Obramowania (outline)
Właściwość outline używana jest bardzo rzadko, przede wszystkim z powodu jej słabego wsparcia przez przeglądarki - z tego, co wiem jedynie Safari, OmniWeb i Opera obecnie ją obsługują [Gecko od niedawna również, można też użyć -moz-outline - przyp. tłumacz]. Bez względu na to, przy użyciu oddzielnych właściwości, możesz zdefiniować obramowanie tak:
outline-color:#f00;
outline-style:solid;
outline-width:2px;
albo tak:
outline:#f00 solid 2px;
Outline posiada kilka interesujących cech, dzięki którym jest użyteczne: w przeciwieństwie do ramek (border), nie zajmuje miejsca i jest zawsze nakładane na wierzch boksu. Oznacza to, że chowanie i odkrywanie obramowania nie powoduje dodatkowego reflow-u [np. skacze tekst - przyp. tłumacz] i nie wpływa na pozycję lub rozmiar elementu, na który jest zastosowane. Obramowanie może być także nieprostokątne.
Zmniejszony rozmiar pliku i łatwiejsza praca z CSS-em
To były skrócone właściwości dostępne w CSS 2. Jeśli weźmiesz plik CSS jakiejś dość dużej strony i zrobisz jedną jego wersję nie używając skróconych właściwości i drugą wersję, która je wykorzystuje, zobaczysz ogromną różnicę w rozmiarach plików. Taki właśnie jest jeden z powodów do korzystania ze skróconych właściwości, drugim jest jest to, że łatwiej będzie ci pracować z CSS-ami - wiem to z doświadczenia.
Znasz jeszcze inne sposoby na skracanie CSS-ów? - Podziel się z nami.
Źródło: Roger Johansson