ЦСС Схортханд вс. Лонгханд - Када користити
Кратки и дуги - један је концизан, а други прецизан. Један је дошао до постојања из жеље за краткошћу, док је други чврст да очува јасноћу. У сваком случају, они имају своју сврху, за и против, да тако кажем.
Овај пост ће осветлити и ЦСС скраћенице и кратке нотације, а закључак који је најбоље користити за коју ситуацију.
Шта је скраћено власништво?
Скраћено власништво је својство које узима вриједности за друге скупове ЦСС својстава. На пример, можемо доделити вредност за бордер-видтх
, гранични стил
и боја ивице
помоћу граница
само имање.
У основи,
бордер: 1пк солид блуе;
исто је као:
бордер-видтх: 1пк; гранични стил: солид; бордер-цолор: блуе;
Уз то, не морамо засебно декларисати појединачне вредности имовине (што је сувишно, троши време и простор). Он такође враћа изостављена својства у декларацији, нешто што се може искористити.
Како то функционише?
Као што је претходно поменуто, пишемо скуп других вредности својстава у скраћеном редоследу, редослед није битан ако све вредности својстава у скраћеном облику су другачије врсте као у граница. Фор пропертиес витх сличне врсте вредности лике маргин, ред је важан. Када сте у недоумици, запамтите у смјеру казаљке на сату!
А шта ако пропустимо имовину или две у декларацији? У горњем примеру, рецимо да смо игнорисали гранични стил
.
граница: 1пк плава;
Више нећемо моћи да видимо границе, не зато што скраћена имовина није функционисала, већ зато што гранични стил
што смо изоставили, добили смо дефаулт вриједност ниједан
. Тако је то скраћено власништво донесено.
бордер: 1пк но блуе;
Хајде да бацимо 1пк
за бордер-видтх
и задржи друга два:
бордер: солид блуе;
Моћи ћемо да видимо границе, само са дебљом ширином и то је због тога бордер-видтх
својство је добило подразумевану вредност медиум
.
граница: средње чврста плава;
Овим је то закључено за нас када је вредност имовине изостављена у стенографској декларацији, то својство поприма своју подразумевану вредност (чак и ако мора да поништи било коју претходну вредност додељену за исту).
Ако постоји бордер-видтх: 1пк;
за елемент раније бордер: солид блуе;
за исту ће бити и граница медиум
(подразумевана вредност), не 1пк
.
Још једна ствар која је вредна помена је то не можемо користити вредности као наследити
, почетно
или унсет
, који су доступни за све ЦСС особине, у скраћеној нотацији. Ако их користимо, претраживач неће моћи тачно да зна која је то вредност коју би требало да представља у скраћеници - цела декларација ће бити одбачена.
Тхе све
својство
Постоји једно ЦСС скраћено својство које може поставите вредност за све ЦСС особине. ЦСС-вриједности наследити
, почетно
и унсет
се примењују на сва својства и стога су то једине вредности које прихвата све
својство.
див алл: инитиал
Ово ће учинити див
елемент који одбацује СВЕ вредности ЦСС својстава које има, и ресетује подразумевану вредност у сваком од њих.
. Упозорење
Немојмо злоупотребљавати све
својство. Потреба за тим може настати само у веома ретким случајевима, када нисмо у могућности да додирнемо било који претходни ЦСС код елемента који желимо да применимо на ово својство..
Белешка: ЦСС својство цолор
узима хексадецималну вредност са скраћеницом ако су два броја хексадецималне вредности у сваком каналу боје исти. На пример, позадина: # 445599;
иста као бацкгроунд: # 459;
.
Шта је дуготрајна имовина?
Тхе индивидуална својства које се могу укључити у скраћено својство називају се дуготрајна својства. Неки примери су; позадинска слика
, маргин-лефт
, трајање анимације
, итд.
Зашто бисмо је користили?
Иако су скраћене алтернативе практичне, оне имају недостатак. Запамтите у почетку да смо видели како стенографија надјачава сва изостављена својства са њиховим подразумеваним вредностима? Ово може бити проблем ако ресетирање није пожељно.
Узми фонт
скраћено власништво, на пример. Хајде да га употребимо у х4
елемент (који има подразумевани стил прегледача фонт-веигхт: болд
)
фонт: 20пк "цоуриер нев";
У горе наведеном кратком коду нема вредности за фонт-веигхт
имовине, отуда и фонт-веигхт: болд
(подразумевани стил претраживача) ће бити замењен подразумеваном вредношћу фонт-веигхт: нормал
узрокујући х4
елемент који губи свој храбар стил, који можда није намераван.
Дакле, за горњи пример једноставна два дуготрајна својства, фонт-сизе
и породица фонтова
су савршени.
Такође, користећи скраћеницу за додељивање само једне или две вредности својстава није веома корисно. Зашто дајте додатном раду претраживача да интерпретира сваку појединачну имовину (укључујући и оне изостављене) у скраћеном облику, када је само један потребан за рад?
За разлику од производње, током развоја, неки програмери (нарочито почетници) могу да пронађу коришћење дуготрајних нотација које су много лакше за рад него скраћенице за боља читљивост и јасноћа.
Закључак
Данас са могућношћу брзог кодирања (уз помоћ алата као што је Еммет) и минификације, висока поузданост на стенографији није потребна, али је у исто вријеме много логично типкати маргин: 0;
. Контекст у којем преферирамо наше ЦСС ознаке ће се разликовати и све што треба да урадимо је да схватимо шта ће нотација најбоље функционисати за нас и када.