CSS Shorthands

CSS shorthands to skróty stanowiące sposób na zaoszczędzenie dużej ilości czasu podczas pisania stylów. Pod warunkiem, że ich konstrukcje znamy na pamięć. Dziś chciałbym przedstawić większość obecnych w kaskadowych arkuszach stylów shorthandów (skrótów).

CSS jest o tyle ciekawym językiem, że wymaga od nas, adeptów front-endu, encyklopedycznej wręcz wiedzy na temat stylowania stron. W zasadzie mało ważne jest tu logiczne myślenie, a bardziej wiedza i świadomość co robi dana właściwość CSS. Podczas gdy poznawałem podstawy CSSa, używałem wielu shorthandów nieświadomie - za przykład może posłużyć obecna w prawie każdym selektorze właściwość margin lub padding. Nie będąc niczego świadomym "dzieckiem", poznającym dopiero co świat webdevelopmentu przpisywałem formułki z blogów i tutoriali jedynie te, które były mi wówczas potrzebne. Dziś, już jako nieco bardziej świadomy człowiek, używam te narzędzie w sposób bardziej zaawansowany i chcę podzielić się tą wiedzą ze światem. Dlatego w tym wpisie spróbuję wytłumaczyć jak pisać poprawnie większość obecnych w CSSie skrótów, tak aby ten wpis stanowił pewną ściągę w ramach potrzeby nie tylko dla mnie, ale i dla Was, potencjalnych czytelników. Tym bardziej, że podobnego zasobu wiedzy - z kompletnym wyjaśnieniem zagadnienia - w sieci nie znalazłem.

Margin i padding

Zajmijmy się na razie czymś dość prostym do zrozumienia. Tak jak już wspomniałem, margin i padding to jedne z najczęściej używanych właściwości w CSSie. Podejrzewam, że mało kto nie wiedziałby jak one działają, ale jako, że omawiam tu zagadnienie kompletnie, to nie mogło ich tu zabraknąć. A zatem, chcąc dodać do elementu blokowego margines górny o wartości 15px, boczny lewy o wartości 10px i dolny o wartości 25px, naturalnie zapisalibyśmy to w taki sposób:

{
     margin: 15px 0 25px 10px;
}

Dzięki temu otrzymamy oczekiwany rezultat. To naturalny dla większości sposób przypisywania marginesu, gdzie pierwsza wartość oznacza margines górny, druga prawy, trzeci dolny, a czwarty - siłą rzeczy ostatni - lewy.

zdjęcie tematyczne
margin: 15px 0 25px 10px;

Jest to przykład shorthandu, którego przeciwieństwem jest następujący zapis:

{
     margin-top: 15px;
     margin-bottom: 25px;
     margin-left: 10px;
}

Ale jasnym jest, że użyjemy skrótu zamiast takiego zapisu. Dzięki temu w kodzie jest ładniej i właściwość zajmuje jedną, a nie trzy linijki kodu. Oczywiście, to nie oznacza, że całkowicie powinniśmy zrezygnować z zapisów nie skróconych - kiedy chcemy ustawić tylko jedną wartość marginesu, powinniśmy używać właśnie ich. Shorthandu margin możemy używać w jeszcze bardziej wyrafinowany sposób. Na przykład, kiedy chcemy przypisać wszystkim marginesom wewnętrznym tą samą wartość 20px, to zrobimy to w ten sposób:

{
    padding: 20px;
    /* zamiast padding: 20px 20px 20px 20px; */
}

Podobnie w przypadku kiedy chcemy przypisać wartość do jedynie przeciwległych marginesów, przykłady:

{
    padding: 15px 0;         /* górny i dolny margines wewnętrzny po 15px, a boczne 0 */
    margin: 0 10px            /* boczne marginesy zewnętrzne po 10px, a górny i dolny 0 */
    margin: 10px 0 5px   /* górny margines 10px, boczne po 0, a prawy 5px */
}

Border

Jeżeli chodzi o obramowania, to sprawa wygląda nieco inaczej. Ale tylko nieco. Istnieją 3 właściwości opisujące border, a mianowicie: border-widthborder-styleborder-color. Zamiast pisania ich wszystkich możemy użyć takiego skrótu:

{
    /* użycie shorthandu */
    border: solid 2px #000;

    /* tradycyjny zapis */
    border-style: solid;
    border-width: 2px;
    border-color: #000;
}

Powyższe zapisy sprawią, że border pojawi się dla wszystkich krawędzi. Co jeśli jednak chcemy przypisać border tylko dla kilku? Wtedy posłużymy się następującym zapisem:

{
    border-bottom: solid 2px #000;
    border-left: dotted 3px red;
}

Nie mamy tu niestety możliwości zapisania wszystkiego za jednym zamachem. Ale i tak lepsze to niż używanie takiego zapisu:

{
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #000;

    border-left-style: dotted;
    border-left-width: 3px;
    border-left-color: red;
}

Background

Za każdym razem kiedy chcę użyć tego shorthandu, zapominam jego konstrukcji, co sprawia, że popadam w fustrację i koniec końców i tak używam tradycyjnego zapisu. Tym wpisem chciałbym poradzić sobie z tym problemem. Spójrzmy więc na taki przypadek:

{
    background-color: red;
    background-image: url('https://source.unsplash.com/random/300x300');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: contain;
}

Masa kodu, prawda? Użyłem tu w zasadzie wszystkich możliwych właściwości CSS dla tła. Skrócimy to w następujący sposób:

{
    background: red url('https://source.unsplash.com/random/300x300') no-repeat fixed center/contain padding-box border-box;
}

Z ośmu linijek robi nam się jedna. Kolejność zapisywania właściwości w background jest dowolna, więc równie dobrze możemy zapisać to tak:

{
    background:   padding-box border-box no-repeat fixed center/contain  url('https://source.unsplash.com/random/300x300') red;
}

Skoro to takie łatwe, to czym spowodowana była moja frustracja? Otóż właściwość background ma kilka haczyków, przez które nie zadziała. Spójrz na to, co napisałem - zapewne rzuca ci się w oczy zapis center/contain. Te wartości przedstawiają kolejno właściwości background-position oraz background-size. W shorthandzie size musi zawsze pojawić się po / zaraz po wartości position. Sam background-size nie może być ustawione bez background-position, ale kombinacja na odwrót jest już dopuszczalna.

Kolejnym wyjątkiem jest tutaj sama wartość background-position - możemy ją zapisać w dwojaki sposób:

{
    background-position: center;
    background-position: left top;
    background-position: 50% 50%;
}

Jednym z nich jest sposób z jednostkami CSSowymi, a drugim słownym - dwuczłonowym. W shorthandzie zapiszemy to w taki sam sposób, tyle że wartości te muszą być zawsze umiejscowione jeden po drugim - nieważne w jakiej kolejności. Dodam, że posługiwanie się jednostkami nie przeszkadza w użyciu wartości:

{
    background: red 50% 50%/contain;
}

Zauważ że wykorzystałem tu jedynie 3 właściwości dotyczące tła. Nie jest więc konieczne używanie ich wszystkich w zapisie skrótowym. Na przykład dla samego koloru tła dobrą praktyką jest zapisywanie shorthandu zamiast background-color:

{
    background-color: red;
    background: red;
}

Ostatnim z haczyków są właściwości background-origin background-clip. Posiadają one takie same typy wartości, czyli padding-boxborder-box oraz content-box. Umieszczając w shorthandzie tylko jedną taką wartość, zostanie ona przypisana do obu tych właściwości. Jeżeli umieścimy dwie takie wartości, to jedna będzie dotyczyć właściwości background-origin, a następna background-flip. Warto zaznaczyć, że nie muszą one występować zaraz po sobie. Zapis:

{
    background: content-box url(photo.jpg);
}

To to samo co:

{
    background-origin: content-box;
    background-clip: content-box;
    background-image: url(photo.jpg);
}

Animation

Tutaj sprawa jest prosta - kolejność dowolna, pierwsza wartość jednostkowa oznacza długość wykonywania się animacji, czyli animation-duration, a druga opóźnienie animacji, tj animation-delay. Konieczna jest tutaj właściwość animation-name w shorthandzie, poniważ musimy przypisać selektor do jakiejś animacji.

{
    /* zapis */
    animation-name: appear;
    animation-duration: 1s;
    animation-delay: 200ms;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;

    /* można zastąpić na przykład takim zapisem: */
    animation: appear 1s 2 200ms ease-in forwards alternate;
}

Font

Osobiście shorthand, do którego ciężko mi się przekonać i nie wiem czemu, ale wolę w tym wypadku używać tradycyjnych zapisów. Może wynika to z tego, że style czcionek używamy dość rzadko, a jak już, to jest to najczęściej font-size, lub font-weight. Tak czy owak, taki zapis:

{
    font-family: Montserrat, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 2rem;
    line-height: 2rem;
}

zamienimy na taki:

{
    font: italic 900 2rem/2rem Montserrat;
}

W tym shorthandzie musimy podać zawsze nazwę czcionki i to zawsze na końcu. Oprócz tego konieczne jest podanie wielkości czionki, czyli font-size. Naprawdę nie rozumiem kto wpadł na taki pomysł, ale jest to w mojej ocenie absurdalne rozwiązanie. Po pierwsze - prawie nigdy nie zmieniamy danej czcionki w projekcie, a po drugie - font-size też jest często dziedziczony z rodziców. Często chcemy zmienić jedynie font-style, font-weight bądź line-height. Wszystkie te właściwości nie są konieczne w shorthandzie, ale line-height nie może wystąpić bez font-size. Poza tym nie możemy działać tym skrótem na takie właściwości, jak: font-variantfont-size-adjust, czy font-stretch. Już chyba wiem, dlaczego się do tego shorthandu nie przkonałem. Ponieważ uważam, że utrudnia on pisanie styli, aniżeli pomaga. Jest to przykład, że nie każde rozwiązanie powstałe, by ułatwić pracę, w rzeczywistości działa. Ja na pewno nie będę korzystał z tego shorthandu. A wam, drodzy czytelnicy też to polecam. Może się on przydać w wypadku kiedy chcemy zmienić na szybko styl czcionki i jej rozmiar jednocześnie. Ale w tym wypadku i tak musimy nadpisać używaną ciągle rodzinę czcionek.

List-style

Bardzo ciekawy shorthand, o którym istnieniu dowiedziałem się stosunkowo niedawno. O ile właściwości list-style-image nie używa się prawie nigdy, tak list-style-type list-style-position praktycznie zawsze. Dlatego zamieńmy właściwości:

{
  list-style-type: circle;
  list-style-position: inside;
}

na shorthand:

{
   list-style: circle inside;
}

Kolejność jest tutaj dowolna - jeżeli chcemy dodać list-style-image, nie ma problemu, by to zrobić - podobnie jak zastosować ten shorthand tylko dla jednej właściwości.

Shorthandy są świetne!

Używajmy ich jak najczęściej, by zaoszczędzić czas i klikanie w kąkuter. Oczywiście warto jest dla pewnych przypadków nadal stosować nie skróconych zapisów, np. dla intergracji z jakąś animacją lub skryptem, albo kiedy ustawiamy wartość dla jednego marginesu. Jednak w 90% przypadkach powinniśmy stosować coś co ułatwia życie. No może za wyjątkiem shorthandu dotyczącego czcionek. Opisałem tutaj zagadnienie shorthandów kompletnie i szczegółowo. Mam więc nadzieję, że przyda się to komuś, kto zapomni jak używać danego skrótu.

Źródła

© Damian Kalka 2021
Wszelkie prawa zastrzeżone