Comments 68
Синтаксис может быть немного страннымЭто не «странный синтаксис», а залёт. Такое ощущение, что тему css grid проектировал или ребёнок, или толстый тролль.
BBcode — это извращение над HTML, которое не имеет права на существование. Он был придуман для того, чтобы "обезопасить" пользовательский ввод. Если хочется тегов, то в современном мире использовать не HTML (возможно, с дополнительными тегами) — это маразм.
Кроме того, что HTML, что BBcode очень неприятно набирать в отличной от английской клавиатурной раскладке. Заставлять постоянно переключать раскладку — это издевательство над пользователем.
И таки для markdown есть какой-никакой стандарт. Много где остаётся царское наследие, но в будущем всё должно свестись к CommonMark.
И да, markdown включает подмножество HTML, поэтому, если так хочется хочется теги, всегда можно использовать их. На этом сайте даже галочка для отключения парсинга MD есть.
Так пилят стандарт понемногу. Дело за браузерами...
ИМХО, уж лучше ручками теги вбивать.
редактор форм в Delphi
Ну да, если у нас все элементы до единого — абсолютно позиционированы, то и младенец визуальный редактор сочинит.
А я вот не согласен. Я признаю только человекочитаемые форматы: программа может и сдохнуть, вместе с разработчиком или только с поддержкой, и формат вместе с ней. И стандарт уйдёт туда же. А человекочитаемость — она и есть человекочитаемость.
Не проблема — возьмите и укажите их в таком виде:). Грид-линиям можно давать произвольные имена. А если у вас есть именованные грид-области, то их начало и конец автоматически получают имена имя_области-start и имя_области-end. Куда уж еще понятнее? :)
Не придется. Нумерация грид-линий — лишь один из over 9000 способов обратиться к ним. Выбирайте из всего многообразия то, что вам больше по душе (и по задаче:).
Вообще когда-то было хорошее правило хотя бы бегло ознакомиться с предметом критики (скажем, пробежавшись по оглавлению спеки), прежде чем бросаться обвинять авторов в чем-либо. Например, прежде чем ругать конструкторов бензопилы за тяжелую и неудобную ручку «этой дурацкой ножовки», было бы неплохо выяснить, что бензопилу можно заправить и включить. Жалко, что в вебе это правило больше не работает...
Протрахавшись неделю, разраб константой вклячит что-нибудь вроде такого:
.container {
grid-template-areas:
"j j j j o o o o p a a a"
"a a a a j o p a a a a a"
"j o p a j o p a j o p a";
}Вот только это не понадобится. Для автоматической генерации в гридах предусмотрены специально обученные инструменты, в частности, именованные линии с волшебными окончаниями -start и -end, которые достаточно один раз поставить в нужные места шаблона в grid-template-columns и -rows соотв-но. А «верстка ASCII-артом» из примера предназначена именно для быстрого набрасывания простого макета человеком (в т.ч. ребенком — почему нет?:).
Я понимаю, фронтендеры через себя ещё и не такое пропускают, но, господа, это всё же ненормально. Берегите себя.
Там были другие «start» и «end»:). Там были начало и конец элемента в координатах грида. Но можно задать начало и конец и области в самом гриде, не заполняя ее буквами, как здесь. Сила (но и сложность) гридов именно в наличии множества альтернативных записей для одного и того же действия, которые можно выбирать по задаче. Ну и даже самый извращенный из этих вариантов всяко здоровее, чем центрирование через margin:auto, clearfix-хаки и прочие давно привычные для верстальщиков штуковины:)
Кстати, если там не одна буква для обозначения, то можно писать более полно, а для прода минифицировать…
В общем, я хочу сказать, что есть много вопров, и что многие технологии красивы на уровне «Hello, world!», а потом превращаются в кашу.
Для 100 элементов, скорее всего, лучше использовать как раз другие варианты разметки грида — не с именованными областями, а с repeat() и «массивами» именованных линий. Имхо, уж в чем-чем, а в недостатке гибкости синтаксиса CSS-гриды обвинить трудно:).
Вот со вложенностями, увы, пока всё довольно грустно. В ранних черновиках были подсетки (subgrids), но с ними всплыло много сложностей в реализации, так что их отложили на 2-й уровень спеки. Частично проблему решает display:contents, но он пока работает без флагов только в Firefox и совсем недавно в WebKit (хотя в Хроме он тоже реализован и где-то в ближайшей паре-тройке релизов его должны вынести из-под флага, только Edge как обычно)...
Ну да, старые костыли мы выбросили, чуть было не обрадовались, что новые будут не нужны, а нас так обломали. Обидно, досадно, но в целом — всё как обычно.
Вы можете прогрессивно улучшать, например, box-shadow. Когда он поддерживается — тень есть, когда не поддерживается — да и хрен с ней с тенью. Вот это вот стоит делать.
А верстать сначала на float:left; а затем то же самое (на 100% совпадающее, иначе никак это ж верстка) на гридах… зачем? Не делайте одно и то же два раза ради… да я даже не знаю ради чего. Просто не делайте так.
Либо grid, либо float. Не мешайте их.
на 100% совпадающее, иначе никак это ж верстка
Это заблуждение родом из 90-х. Современная вёрстка фактически по определению адаптивная. И в число параметров, к которым можно и нужно адаптироваться, входит не только ширина окна браузера, но и возможности клиентского окружения. Для этого придумали целую директиву supports.
Пользователи хороших браузеров не должны страдать из-за того, что старые браузеры просто существуют! Ну а что верстальщикам придется написать на 5-10 строк кода больше — ну так это их работа, им за это платят:)
одно и то же два раза ради… да я даже не знаю ради чего.
Так узнайте. И делайте так:). Ради удобства пользователей — в конце концов, вы ведь для них стараетесь.
with simple fallbacks for non-supporting browsers
Перевестать все и вся на float — это не simple fallback. Вот в этом основная проблема.
Я не спорю, что могут быть ситуации, когда можно сделать простой фалбек или вовсе оставить «как получится» на флоатах и «красиво» на гридах. Но в реалиях будет примерно так:
1. style.css
2. style-grid.css
Подключаются одновременно и в каждом свои баги, которые нужно поддерживать и исправлять. Я призываю именно этого избегать.
Не надо переверстывать то, что легко и изящно делается на гридах, кривыми и капризными костылями на флоатах и clearfix-ах. Надо делать в каждом браузере максимально хорошо для пользователя, насколько этот браузер позволяет «малой кровью». И просвещать заказчиков, требующих «везде одинаково», что пользователи не будут сидеть и скрупулезно сравнивать сайт в разных браузерах, а откроют его в чем-то одном и будут искать заветную кнопку «сделать заказ». Или не будут — если сайт чем-то (неважно чем — тормознутостью, глюками, общей «старомодностью»...) им не понравится.
Но не делать хорошо там, где можно, только потому, что настолько хорошо можно сделать не везде — не дело. Это не техническое обоснование, это верстальщицкая лень. Которая дает лишь небольшой сиюминутный тактический выигрыш (больше заработать методом «тяп-ляп и в продакшн», дольше побухать:), но стратегически от нее одни минусы (у конкурентов сайты будут быстрее, красивее и надежнее, можно упустить момент и оказаться морально устаревшим, как верстальщики на таблицах в конце 2000-х:). Конечно, во всём нужен разумный баланс, но просто так поощрять лень не надо:)
А для чего еще может понадобиться экономить время на том, чтобы сделать хорошо, надежно и современно? :)
«Современно» в вебе это не всегда хорошо и надежно, к сожалению.
Впрочем, думаю я понял вашу позицию. Поначалу я подумал, что вы предлагаете весь макет целиком и полностью верстать два раза, но, похоже, вы просто предлагаете «менее красивые» фалбеки для небольших кусочков верстки. Тут мое мнение с вашим совпадает.
«Современно» в вебе это не всегда хорошо и надежно, к сожалению.
В общем случае, согласен. Но в частном случае раскладки блоков использовать инструмент, изначально для нее предназначенный — в отличие от флоатов, инлайн-блоков, колонок и прочего, чем нам приходилось поневоле выкручиваться до сих пор — почти всегда будет надежнее и быстрее, чем эмулировать то же поведение хаками и/или скриптами. Не говоря о новых возможностях, которых у старых технологий в принципе не было (напр. выравнивания чего угодно как угодно).
«менее красивые» фалбеки для небольших кусочков верстки
Именно так!
Сложная сетка — да, почему бы и не гриды.
Просто блоки 3х33%? Поставьте флоаты и не мучайте мой ИЕ 8 :)
Для IE8 по-любому будут флоаты или инлайн-блоки, он другому не обучен.
Но зачем мучить флоатами и инлайн-блоками (требующими reflow с repaint-ом чуть ли не всего body при появлении в любом из элементиков малейшего намека на динамику, т.к. они зависят друг от друга, как падающие костяшки домино) мой Хром, когда можно дописать 3-5 строчек CSS и обеспечить его железобетонной сеткой на гридах? :)
Отдельный код для «уголков картинками» и отдельный с border-radius. И когда вся страница в этих уголках, там получается такая ядреная смесь, что пипец просто.
Так критичны уголки? Оставьте все на картинках и не мучайтесь.
А для гридов ситуацию с фалбеком не каждый верстальщик даже придумать сможет, не то что реализовать. Ну правда же.
Да, кстати. caniuse.com/#search=supports
Отличный вариант для фаллбека на IE :)
Именно что отличный. Браузеры, не понимающие supports (в т.ч. IE) просто проигнорят всё, что внутри него.
А варианты можно найти практически всегда. Например, вместо вот такой аккуратно выровненной сетки можно сделать более примитивную, прижатую к левому краю, на инлайн-блоках или тех же флоатах. Пользователи старых браузеров не заметят разницы, а новых — порадуются красоте:)
Про флекс там такая пометка из-за большого количества багов, для большинства из которых есть довольно простые обходные пути. Ну и из-за того, что со времени его выхода сама спецификация слегка поменялась, и он чуть по-другому работает в паре-тройке граничных случаев (типа анонимных боксов вокруг табличных ячеек во флекс-контейнере). Но основные моменты – последний синтаксис, многострочность, все способы выравнивания (кроме появившегося позже space-evenly) и т.п. там вполне можно использовать.
Вот с гридами, да, там проблема – другой старый синтаксис и отсутствие алгоритма авторазмещения (надо всегда явно указывать грид-области для элементов, иначе они все валятся в первую ячейку). Но многое, включая minmax() и аналог функции repeat(), там неплохо работает и поддерживается Автопрефиксером (сам использовал в двух реальных проектах).
[упс, мимо]
Верстка только на дивах — зло. Спецификация html5 добавила много президент рамных тегов, которые помогают в чтении кода, сео и доступности для скрин ридеров
Спасибо, за комент. Различных тегов
Какой же ад будет поддерживать сайты с этой сеткой, float-ами и flexbox вперемешку… "… я поставил компонент 'Позвоните нам' и у меня что-то меню пропало.."
В рамках одного контейнера «перемешки» быть не может — все три штуки взаимоисключающие. И grid, и flex отменяют действие float для потомков (удобно для фолбэков!), а из них двоих применяется то, что объявлено позже. Только с position:absolute могут быть нюансы, но абсолют — он и в Афри гридах абсолют.
А компоненты из разных контейнеров друг другу мешать не должны. И если всё-таки мешают — проблема ну явно не в гридах:)
@media screen and (max-width: 640px) {
.container {
grid-template-areas:
"m m m m m m h h h h h h"
"c c c c c c c c c c c c"
"f f f f f f f f f f f f";
}
}
не работает. А в старом FireFox версии 56 — работает. Так что инструмент возможно и «фантастический» как заявляет автор, только реализация в браузерах, мягко говоря, пока далека от совершенства.
Не стоит бросать всё и переходить только на гриды, но и намеренно отказываться от быстрого и удобного инструмента тоже не стоит:). Да, массовой гридизации еще нет, но и живых примеров вполне хватает. И пример из статьи у меня в Хроме 69 (винда 10) работает, так что проблема скорее всего не в гридах.
И вообще с браузерной реализацией в целом дела как раз чуть получше, чем было с теми же флексбоксами.
Просто во время ресайза я заметил что footer «прилип» к странице
Как быстро спроектировать сайт с помощью CSS Grid