Адванцед Цхецкбок Стилинг са ЦСС Грид-ом
Тхе ЦСС Грид Лаиоут Модуле не само да може да реши мамута проблема са распоредом већ и неких добрих старих проблема већ дуго времена, као такав стилизовање ознаке за потврдни оквир.
Иако постоји релативно једноставан начин да стилизујете ознаку када се појави после то није лако када се појави ознака пре него што то.
Цхецкбок стилинг без ЦСС Грид-а
Стајлинг етикете после поље за потврду је нешто што ми програмери раде од када смо негде читали. Ова техника је један од примарних и старих примјера снажне динамике коју ЦСС може посједовати.
Ево кода с којим сте већ можда упознати стилес а лабел после цхецк бок:
инпут: означено + ознака / * стиле ме * /
А стилед лабел после цхецкбок можда изгледа овако (међутим, можете користити и друга правила стила):
Горњи ЦСС код користи адјацент сиблинг цомбинатор означен са + кључ. Када је поље за потврду у : цхецкед држава, елемент после то (обично ознака) може се стилизовати користећи овај метод.
Таква једноставна и ефикасна техника! Шта може евентуално погријешите с њом? Ништа - све док не желите да прикажете ознаку пре него што потврдни оквир.
Комбинатор сродних сестара бира следећи елемент; то значи да етикета мора доћи после поље за потврду у ХТМЛ изворном коду.
Дакле, да би се појавила ознака пре него што припадајуће поље за потврду на екрану, не можемо га само преместити испред поља за потврду у изворном коду, као претходни сиблинг селектор не постоји у ЦСС-у.
Што оставља само једну опцију: премјештање потврдног оквира и ознаке Користећи трансформисати или позицију или маргин или друго ЦСС својство са неком врстом телекинетичке снаге, тако да се ознака појављује лево од поља за потврду на екрану.
Проблеми са традиционалном методом
Нема ничега мајорли погресно са горе наведеном техником, али мозе бити у неким случајевима неефикасан. Мислим на случајеве када преуређене позиције поља за потврду и ознака више не функционишу.
Тхинк респонсиве, на пример. Можда ћете морати да промените величину или промените положај поља за потврду према уређају на којем је приказан. Када се то деси, хоћеш потребно је да промените положај етикете, јер неће бити аутоматског поравнања са налепницом као одговор на репозиционирање / промену величине поља за потврду.
Можемо елиминисати овај недостатак ако бисмо могли обезбедите солидан распоред за поље за потврду и ознаку, уместо да их грубо позиционирате на страници.
Али, готово сви системи распореда, као што су табеле или колоне, захтевају од вас додајте ознаку испред поља за потврду у изворном коду да се на екрану прикаже на исти начин. То је нешто што не желимо да урадимо јер ће следећи селектор елемената на етикети престати да ради.
С друге стране, ЦСС Грид је систем распореда који је не зависи од положаја / редоследа елемената у изворном коду.
Могућности промене редоследа мреже намерно утичу само визуелни приказ, остављајући редослед говора и навигацију на основу поретка извора. Ово омогућава ауторима да манипулишу визуелном презентацијом остављајући изворни ред недирнут ... - ЦСС Грид Лаиоут Модуле Левел 1, В3Ц
Тако је ЦСС мрежа идеално решење стилирајте ознаку која се појављује пре него што потврдни оквир.
Цхецкбок стилинг са ЦСС Грид
Почнимо са ХТМЛ кодом. Редослед потврдног оквира и ознаке остаће исти као и пре. Само их додамо у мрежу.
Пратећи ЦСС је следећи:
#цбгрид дисплаи: грид; грид-темплате-ареас: "лефт ригхт"; видтх: 150пк; инпут [типе = цхецкбок] грид-ареа: ригхт; ознака грид-ареа: лефт;
Нећу ићи у дубину како ЦСС мрежа ради, као што сам већ написао детаљан чланак о тој теми, које можете прочитати овде. Међутим, неке основе: дисплаи: грид својство претвара елемент у решеткасти контејнер, грид-ареа идентификује подручје мреже којој припада елемент, и грид-темплате-ареас формира распоред мреже, који се састоји од различитих подручја мреже.
У горњем коду постоје два подручја мреже: "лево" и "јел тако". Они измишљају две колоне решетке. Поље за потврду припада "јел тако" и ознаку "лево". Ево како изгледају на екрану:
Пошто нисмо променили релативни положај цхецкбок-а и ознаке у изворном коду, можемо још увек користите суседни комбинатор:
инпут: означено + ознака / * стиле ме * /
Имајте на уму да је ставка мреже увек блокирана; појављује се са околном кутијом познатом као оквир на нивоу решетке. Ако то не желите, на пример за ознаку, ставите омот на ту ставку (замотајте у други елемент) и окрените тај омотач у мрежу.
То је то, народе. ЦСС мрежа ће вам, надам се, помоћи при уклањању изгледа тих безобразних оквира за избор.
