Усъвършенстван стил за маркиране с CSS грид
Най- CSS модул за оформление на мрежата не само може да реши мамут на проблем с оформлението, но и някои добри стари въпроси, които сме били дълго време, като оформяне на етикет с отметка.
Докато има сравнително лесен метод за оформяне на етикета, когато се появи след полето за отметка, не е толкова лесно, когато се появява етикетът преди то.
Стайлинг на квадратчето без CSS грид
Оформяне на етикет след квадратче за отметка е нещо, което разработчиците правят, откакто четем за него някъде. Тази техника е един от най-добрите и стари примери за мощната динамика, която CSS може да притежава.
Ето кода, с който вече може да сте запознати стилизира етикет след отметнато квадратче:
вход: отметнато + етикет / * стил me * /
А стилизиран етикет след отметка може да изглежда така (обаче можете да използвате и други правила за стила):
Горният CSS код използва съседни братски комбинатори маркирани от + ключ. Когато е отметка в полето : проверява състояние, елемент след то (обикновено етикет) може да бъде оформен с този метод.
Такава проста и ефективна техника! Какво би могло възможно се обърка с него? Нищо - докато не искате да покажете етикета преди полето за отметка.
Съседният съчетаващ брат избира следващия елемент; това означава, че етикетът трябва да дойде след отметка в HTML кода.
Така че, за да се появи етикет преди чекбоксът за принадлежност на екрана, не можем просто да го преместим преди квадратчето в изходния код, като предишният селектор за брат не съществува в CSS.
Което оставя само една опция: препозициониране на отметката и етикета използвайки трансформиране или позиция или марж или друго CSS свойство с някакъв вид телекинетична мощност, така че етикетът да се появява отляво на квадратчето за отметка на екрана.
Проблеми с традиционния метод
Няма нищо majorly погрешно с гореспоменатата техника, но тя може да бъде неефективни в някои случаи. Имам предвид случаите, в които пренаредените позиции на квадратчето и етикета вече не работят.
Мислете отзивчиво, например. Може да се наложи да преоразмерите или преместите отметката в зависимост от устройството, на което е показан. Когато това се случи, ще го направите трябва да промените позицията на етикета, тъй като няма да има автоматично пренареждане към етикета в отговор на препозициониране / преоразмеряване на квадратчето за отметка.
Можем да премахнем този недостатък, ако можем осигурете солидно оформление за квадратчето и етикета, вместо да ги позиционираме грубо на страницата.
Но почти всички системи за оформление, като таблици или колони, изискват от вас добавете етикета преди квадратчето в изходния код за да се покаже по същия начин на екрана. Това е нещо, което не искаме да направим, защото следващият селектор на елементи на етикета ще спре да работи.
CSS Grid, от друга страна, е система за оформление, която е не зависи от разположението / реда на елементите в изходния код.
Възможностите за пренареждане на разположението на мрежата умишлено се отразяват само визуално изобразяване, напускане на речевия ред и навигация въз основа на реда на източника. Това позволява на авторите да манипулират визуалното представяне, като оставят целостта на източника непокътнат ...
По този начин, CSS мрежата е идеално решение за стилизирайте етикета, който се появява преди полето за отметка.
Флажок с CSS грид
Да започнем с HTML кода. Поръчката на квадратчето и етикета ще остане същата, както преди. Ние просто добавяме и двете към мрежата.
Придружаващият CSS е както следва:
#cbgrid display: grid; grid-template-области: "ляво надясно"; ширина: 150px; input [type = отметка] grid-area: right; етикет grid-area: left;
Аз няма да отида в дълбочина за това как работи мрежата на CSS, както вече написах подробна статия по темата, можете да прочетете тук. Някои основи обаче: дисплей: решетка свойството превръща елемент в решетъчен контейнер, решетка площ идентифицира областта на решетката, към която принадлежи елементът, и мрежата-шаблон-области оформя оформлението на мрежата, което се състои от различни мрежови области.
В горния код има две мрежови зони: "наляво" и "Дясно". Те се измислят две колони от ред на решетката. Отметката принадлежи на "Дясно" и етикета на. \ t "наляво". Ето как изглеждат на екрана:
Тъй като не сме променили относителното разположение на отметката и етикета в изходния код, можем все още използват съседни комбинатор брат:
вход: отметнато + етикет / * стил me * /
Обърнете внимание, че елемент от мрежата е винаги блокирани; тя се появява с околна кутия, известна като кутия на ниво решетка. Ако не искате това, например за етикет, поставете обвивка върху този елемент (увийте го в друг елемент) и включете тази обвивка в решетката.
Това е, хора. CSS мрежата се надяваме да ви помогне да забиете оформленията на тези нахални отметки.
