CSS Shorthand vs. Longhand - Kiedy używać, który

Stenografia i długopis - jeden jest zwięzły, a drugi precyzyjny. Jedno powstało z braku pragnienia zwięzłości, podczas gdy drugie stoi twardo, aby zachować jasność. Tak czy inaczej, mają swoje cele, wady i zalety, że tak powiem.

Ten post rzuci trochę światła zarówno na notacje CSS, jak i na notacje długie, jednocześnie stwierdzając, które z nich najlepiej wykorzystać w danej sytuacji.

Co to jest stenografia??

Stenograficzna własność jest właściwością, która przyjmuje wartości dla innych zestawów właściwości CSS. Na przykład możemy przypisać wartość dla szerokość granicy, styl graniczny i kolor ramki używając granica sama nieruchomość.

Gruntownie,

 obramowanie: 1px jednolity niebieski; 

jest taki sam jak:

 border-width: 1px; border-style: solid; kolor obramowania: niebieski;

Dzięki temu nie musimy osobno deklarować indywidualnych wartości właściwości (co jest zbędne, czasochłonne i zajmujące dużo miejsca). Zresetuje także pozostałe właściwości deklaracji, co można wykorzystać.

Jak to działa?

Jak wcześniej wspomniano, piszemy zestaw innych wartości właściwości w skrócie, kolejność nie ma znaczenia, jeśli wszystkie wartości właściwości w skróconym są innego rodzaju jak w granica. Dla właściwości z podobne rodzaje wartości jak margines, porządek ma znaczenie. W razie wątpliwości pamiętaj o ruchu wskazówek zegara!

A co jeśli przegapimy jedną lub dwie właściwości w deklaracji? W powyższym przykładzie załóżmy, że zignorowaliśmy styl graniczny.

 border: 1px blue; 

Nie będziemy już widzieć granic, nie dlatego, że skrócona właściwość nie działa, ale dlatego, że styl graniczny pominęliśmy, otrzymaliśmy wartość domyślną Żaden. W ten sposób zrenderowano stenograficzną własność.

 border: 1px none blue; 

Teraz upuśćmy 1px dla szerokość granicy i zachowaj pozostałe dwa:

 granica: jednolity niebieski;

Będziemy mogli zobaczyć granice, tylko z grubszą szerokością, a to dlatego, że szerokość granicy właściwość ma wartość domyślną średni.

 granica: średnio jednolita niebieska; 

To kończy to dla nas gdy wartość właściwości jest pominięta w deklaracji skróconej, ta właściwość przyjmuje wartość domyślną (nawet jeśli musi zastąpić poprzednią wartość przypisaną do tego samego).

Jeśli jest border-width: 1px; dla elementu gdzieś wcześniej granica: jednolity niebieski; dla tej samej szerokości będzie granica średni (wartość domyślna), nie 1px.

Inną rzeczą wartą wspomnienia jest to nie możemy używać wartości takich jak dziedziczyć, Inicjał lub nieoprawny, które są dostępne dla wszystkich właściwości CSS, w notacji skróconej. Jeśli ich użyjemy, przeglądarka nie będzie w stanie dokładnie wiedzieć, która właściwość ma reprezentować wartość w skrócie - cała deklaracja zostanie odrzucona.

The wszystko własność

Istnieje jedna skrócona właściwość CSS, która może ustaw wartość dla wszystkich właściwości CSS. Wartości CSS dziedziczyć, Inicjał i nieoprawny mają zastosowanie do wszystkich właściwości, a zatem są to jedyne wartości akceptowane przez wszystko własność.

 div all: initial

To sprawi, że div element ditch WSZYSTKIE posiadane wartości właściwości CSS i zresetować wartość domyślną w każdym z nich.

⚠ Ostrzeżenie

Nie nadużywajmy wszystko własność. Potrzeba tego może powstać tylko w bardzo rzadkich okolicznościach, gdy nie jesteśmy w stanie dotknąć żadnego poprzedniego kodu CSS elementu, do którego chcemy zastosować tę właściwość.

Uwaga: Właściwość CSS kolor przyjmuje wartość szesnastkową z notacją skróconą, jeśli dwie liczby wartości szesnastkowych w każdym kanale kolorów są takie same. Na przykład, tło: # 445599; jest taki sam jak tło: # 459;.

Co to jest własność longhand?

The indywidualne właściwości które mogą być zawarte w skróconej właściwości, nazywane są właściwościami długimi. Niektóre przykłady to; zdjęcie w tle, margines lewy, czas trwania animacji, itp.

Dlaczego powinniśmy go używać?

Mimo że skrótowe alternatywy są przydatne, mają wadę. Pamiętaj na początku, że widzieliśmy, jak skrócone zastępuje wszystkie pominięte właściwości wartościami domyślnymi? Może to stanowić problem, jeśli reset nie jest pożądany.

Weź czcionka na przykład skrótowa właściwość. Użyjmy tego w h4 element (który ma domyślny styl przeglądarki waga czcionki: pogrubiona)

 czcionka: 20px „kurier nowy”; 

W powyższym skróconym kodzie nie ma wartości dla grubość czcionki własność, stąd waga czcionki: pogrubiona(domyślny styl przeglądarki) zostanie zastąpiony wartością domyślną waga czcionki: normalna powodując h4 element, aby stracić swój śmiały styl, który może nie być zamierzony.

Tak więc dla powyższego przykładu proste dwie właściwości długich, rozmiar czcionki i rodzina czcionek są idealne.

Również używając skrótów dla przypisanie tylko jednej lub dwóch wartości właściwości nie jest zbyt przydatne. Po co dawać przeglądarce dodatkową pracę w interpretowaniu każdej pojedynczej właściwości (w tym tej lewej) w skrócie, gdy tylko jedna jest potrzebna do pracy?

Pomijając produkcję, w fazie rozwoju niektórzy programiści (zwłaszcza początkujący) mogą uznać, że używanie długiej notacji jest o wiele łatwiejsze do pracy niż skrótowe lepsza czytelność i przejrzystość.

Wniosek

Obecnie, z możliwością szybkiego kodowania (za pomocą narzędzi takich jak Emmet) i minifikacji, wysoka niezawodność skrótów nie jest potrzebna, ale jednocześnie jest to logiczne do wpisania margines: 0;. Kontekst, w którym preferujemy nasze notacje CSS, będzie się różnić i wszystko, co musimy zrobić, to dowiedzieć się, który zapis będzie dla nas najlepszy i kiedy.