Комментарии 103
Прежде чем мы закончим, мне также необходимо рассмотреть поддержку CSS Grid браузерами. На момент написания этой статьи 77% браузеров поддерживало CSS Grid, и этот процент растет.
Я верю, что 2018 год станет годом CSS Grid. Гриды достигнут своего прорыва и превратятся в необходимый инструмент для разработчиков интерфейсов. Как и то, что произошло с CSS Flexbox за последние пару лет.
Это все конечно классно, но до тех пор как клиент говорит, что у него все полезло. Пытаясь выяснить почему, оказывается, что он сидит на билде мака 2010 года, потому, что боится обновляться, так как вдруг слетит пиратский фотошоп.
Понятно, конечно, что бывают разные ситуации и иногда приходится рабоать буквально «за еду», но, всё-таки, по возможности стоит подобных ситуаций избегать.
Вопрос в умении считать деньги. Если для клиента $10 (или $15? что-то в этом духе) в месяц на Photoshop — это деньги
Для юрлиц $40 в месяц, 480 в год на одну лицензию, если быть точнее. И это только за одну лицензию на одно приложение, которых в маленькой организации на двадцать сотрудников может быть сотня. 50 тысяч долларов в год — это достаточная сумма для маленькой организации, чтобы рискнуть?
на одно рабочее место
Мелкие фирмы пиратят, большие покупают с огромными скидками. И всегда остается риск — получить визит строгих и вежливых дядей, с вопросами о легальности софта.
Но все равно это далеко не 50к баксов, как пишут выше.
Ну так не Adobe же единым жив человек. У дизайнеров много софта от разных вендоров, не считая Майкрософт. 50к — это ещё весьма скромная оценка.
И всегда остается риск — получить визит строгих и вежливых дядей, с вопросами о легальности софта.
Как показывает практика, строгие дяди приходят независимо от того, легальный у вас софт или нет. У нас конфисковали технику с легальным софтом, выпросили [роскомнадзор]тку, вернули. Когда посмотрели, выяснилось, что к ним даже не притрагивались. Ну т.к. подержали месяц на складе и так же и отдали, когда мошна наполнилась.
Причем «сайт не открылся» для бабушки — это не «блоки не в сетку, как на директорском маке, а в колонку, как на телефоне» из-за отсутствия гридов, а «я жду уже минуту, а оно всё крутится» из-за тормозов волшебного полифила.
Сайты не должны выглядеть везде одинаково — они должны везде быстро работать и быть удобными, насколько это разумно достижимо. По-настоящему адаптивный дизайн адаптируется не только к размерам экрана, но и к доступным техническим возможностям (прогрессивное улучшение, @supports, вот это вот всё).
Сайты не должны выглядеть везде одинаково — они должны везде быстро работать и быть удобными, насколько это разумно достижимо.Есть более простой способ: потихоньку тренировать терпение пользователей. Судя по тому, что я наблюдал — именно этот подход к «бабушкам» применяется на практике. Волшебные полифиллы, работающие минуту, мегабайты бог знает чего и прочее — скорее норма, чем исключение.
Если бы рулили «нетепреливые бабушки с MS IE 6», как вы описываете — этого бы не было.
ирония в том, что сайт по вашей ссылке выглядит одинаково во всех браузерах.
Сайты не должны выглядеть везде одинаково
Зависит от ТЗ. Где может быть ариалом по фону написано, что должны выглядеть одинаково.
Иногда клиенты просят странного. Необязательно кидаться это исполнять, не объяснив, что это требование ТЗ выльется им в дополнительные затраты.
Помню, требовалось как-то 100% точное определение предпочтительного языка посетителя и переключение контента на русский язык. Тут уж над отражением в фоне не посмеёшься…
Вообще говоря, работать с клиентами, которые не умеют считать — очень даже экономически целесообразно.
пару тысяч долларовПерестаньте говорить глупости, фотошоп уже несколько лет доступен по подписке, это стоит десять баксов в месяц, никаких «тысяч долларов за программу» у Адоб уже нет.
Кстати, подписка очень круто увеличила их прибыль.
Так может стоит объяснить заказчику, что его старый браузер — его проблемы и не показатель?
Откуда вы взяли цифру в 15%? Здесь я вижу только около 4%.
Господина vconst не интересуют старые устройства ваших клиентов, которыми они будут заходить на ваши сайты.
У этого подхода есть недостаток (хотя в некоторых случаях это достоинство): количество строк одинаково на всех размерах и не зависим от содержимого.
Всё же, можно сделать так, чтобы количество строк подстраивалось под количество столбцов. Для этого нужно убрать свойство grid-template-rows из .container и указать высоту для дочерних блоков:
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
}
.container > div {
height: 100px;
}
float: left¹⎯⎯⎯⎯⎯⎯⎯
¹ Ну почти :)
Да, «почти» — за исключением количества вариантов распределения оставшегося места, а также тем, что будет, если у некоторых элементов случайно окажется чуть другая ширина или высота:).
На canIuse, где же еще — там даже ссылка стоит. Если жмякнуть Show All + Usage Relative, выйдет наглядно...
Правда, в эти 77% (посчитанные statcounter-ом) входит частичная поддержка в IE10+/Edge 15-, в которой как раз нет auto-fill/auto-fit, авторасположения вообще и многих других «плюшек» (хотя с простыми случаями, типа «святого Грааля» с прибитым футером, даже та версия справляется на ура). Но зато не входят «хромята» типа Я-браузера, которых в Рунете больше, чем всех IE/Edge вместе взятых, и у которых с гридами всё хорошо:)
1. Edge (не знаю, чего там под капотом)
2. IE (Triton)
3. WebKit (Chrome, Chromium, Safari, Midori, Konqeror, добавить по вкусу)
4. Gecko (Mozilla Firefox)
Если 3/4 (75%) браузеров работают — это понятно.
Но 77% — фшоки.
77% по статистике использования. Причем не движков, а именно браузеров.
Ну и, дотошности ради, у Хрома и «хромят» (включая Оперу и Яндекс) сейчас свой движок Blink, в свое время форкнутый от Вебкита, но с тех пор заметно с ним разошедшийся. Движок IE — Trident (хотя ему уже едва ли место среди современных, т.к. он больше не развивается и обновляться не будет), а движок Edge скромно называется EdgeHTML:)
4. Gecko (Mozilla Firefox)
5. Quantum (Firefox Quantum)
6. Goanna (Palemoon, Basilisk, K-Meleon)
7. И да, Blink, про который уже сказали.
1. KHTML => WebKit => Blink, WebView
2. Gekko => Goanna, Quantum
3. Trident => EdgeHTML => R.I.P.
Ну то есть осталось два движка, по сути. С наследниками.
PS. Trident vs Triton — ошибся в морских заморочках, польстил микрософту нечаянно, пардон.
А смысл?
С одной стороны — да, круто, много интересных возможностей, которых ранее не было.
С другой — есть смутное ощущение сырости, незавершенности. Как правило, те вещи, которые делаются в пару строк кода, без особых проблем можно было реализовать и ранее. Да, чуть более многословно, чуть менее изящно, но это не страшно. А вот реально сложные задачи (какая-то нетривиальная адаптивность) всё равно упирается в какие-то нюансы. И всё время думаешь: блин, ну вот почти получилось же, не хватает только одного маленького свойства/опции… но их нет.
Одинаковая ширина всех блоков в столбце несмотря ни на что. Аналог <table> для CSS.
Flexbox не гарантирует, что ширина блоков друг под другом будет одинаковой. В частных случаях можно сделать ширину одинаковой, например, если указать ширину в единицах измерения и выключить растягивание (flex-grow) и сжатие (flex-shrink):
.container {
display: flex;
flex-flow: row wrap;
}
.container > div {
width: 20%;
flex: none;
}В этом случае для адаптивности нужно будет добавить ещё несколько media-правил, меняющих ширину дочерних блоков.
Если попытаться сделать пример из статьи на flexbox без media-правил, то получится не то, что ожидаешь:
.container {
display: flex;
flex-flow: row wrap;
}
.container > div {
flex: 1 0 100px;
}Демо на CodePen. Если Вы знаете, как реализовать пример из статьи на flexbox без media-правил, буду рад взглянуть.
Если к последнему примеру добавить ещё и растягивание блоков в зависимости от содержимого, то с помощью flexbox точно не получится добиться равной ширины блоков друг под другому, а с grid это возможно.
P.S. Я согласен, что наличие в CSS сразу и grid и flexbox выглядит избыточным. Но я не считаю, что grid ближе не к flexbox, а к display: table.
Казалось бы, таблицы поддерживаются всеми браузерами уже около 20 лет. Но нет, сначала адепты div-css вёрстки придумали себе альтернативный способ, мучились мучились с ним годами и наконец "придумали" в своём мире таблицы. Но зато всё это время они оставались модными и современными.
Такой комментарий мог написать только человек, никогда не верставший таблицы.
Видимо, вы никогда не задавались вопросом, как сделать колонку таблицы минимальной ширины в N пикселей, а не среднего от min-width, width и ширины внутреннего контента, как это происходит на самом деле.
Не очень понял, что значит "колонка минимальной ширины". Чтобы её сжать дальше нельзя было, меняя размер окна браузера? Какие с этим проблемы?
С минимальной шириной не получилось пример найти, есть с максимальной:
https://output.jsbin.com/helodaw
Нужно сделать первую колонку не больше 100 пикселей, но у таблицы правила такие, что max-width она не слушается. Попробуйте сами.
Хм, и правда. Но эта проблема — не повод выкидывать таблицы и придумывать им замену. Можно было просто сделать чтобы max-width работало, или добавить ещё какое-то свойство для этой цели специально для таблиц.
Если бы можно было "просто сделать", то наверное так бы и сделали. Однако не все так просто.
max-width работает только для блочного отображения, а у таблицы — табличное. У таблицы есть свои правила, как ширина ячейки растет в зависимости от контента. Поменять их — означает сломать существующие в интернете сайты. Гораздо проще ввести новые правила отображения, что и было сделано.
Не думаю что там что-то сильно можно сломать. Таблицы изначально сделаны так, чтобы можно было дать свободу браузеру в мелочах и сообщить ему в коде только некоторые условия, по которым (с учётом всяческих посторонних факторов) он сам уже рассчитает всю геометрию попиксельно.
Но если всё же есть опасение что включение max-width может сломать существующие сайты — ну так ввели бы max-column-width какое-нить, которое действовало бы специально для таблиц. На тех сайтах что про него не в курсе его точно нет и следовательно ничего не сломается.
Ну конечно, весь рабочий комитет CSS не знает, как это сделать, а firk — знает. Срочно включить в CSS Working Group его!
А если серьзно, y на Гитхабе есть репозиторий csswg-drafts, где в issues принимаются подобного рода вопросы. Более того, этот вопрос там был уже задан.
Срочно включить в CSS Working Group его!
Не надо, мне будет лень.
Более того, этот вопрос там был уже задан.
Я может быть не там смотрю, но по ссылке я вижу главным образом обсуждение сходств/различий между браузерами, а на втором плане — желание отразить реальность в стандарте и какие-то предложения насчёт max-width. Предложения про аналог max-column-width я там не вижу.
Гриды — не замена таблицам, и наоборот. У таблиц по-прежнему есть сильные стороны, бывают ситуации, когда они выигрывают у тех же флексбоксов. Но таблицы, равно как и флоаты, инлайн-блоки и прочее, никогда не предназначались для раскладки блоков. И исторически с ними связано слишком много «тёмной магии» (как в самом стандарте, так и в браузерных реализациях), отчего работать с ними не всегда так приятно, как с новыми техниками специально для раскладки. Но их никто не «выкидывает», и разработчики стандарта как раз планируют «сделать, чтобы там всё работало». Во многом опираясь на опыт гридов:).
На это страсть какое остроумное замечание отвечает сам легендарный Эрик Мейер:
Мы согласились, что табличная разметка для раскладки была неудачной идеей, особенно в пору своей популярности, она требовала множества хаков, чтоб просто обвести что-либо рамкой, не говоря уж про закругленные углы. Всех не устраивало, что это требовало 50 килобайт HTML-тегов и трех запросов к серверу для любой мелочи, и так 100 раз для всей раскладки страницы, вдобавок табличная разметка связывала всё в строго определенном порядке, что было форменным издевательством над самой идеей доступности контента для людей и поисковиков. Никто не возражал против визуального результата. Не устраивало то, во что этот результат обходился.
С гридами вы сможете взять простую, доступную разметку и выстроить ее визуально практически как вам угодно. Можно поставить последний элемент в коде визуально в начало, например. Можно поменять пару дополнительных элементов страницы местами. Вопросы типа «в каком порядке должны идти элементы, чтоб визуально расположить их как надо?» уйдут в прошлое. Вы указываете их в каком нужно порядке, а потом отображаете как нужно. Это лучшее приближение к полному разделению структуры и представления, которого мы когда-либо могли добиться.
Мало того, благодаря CSS-трансформациям, контурам обрезки, обтеканию сложных форм и многому другому, вам не обязательно даже втискивать всё в строгие рамки сетки. Простора для визуального творчества столько, что вы даже представить не можете. И я не могу. Вообще никто.
Тут видно по сути два аргумента:
1) То что div-css позволяет, в отличие от таблиц, ставить элементы в коде и выводить на экран в несовпадающих порядках. Ну, можно зачесть это за плюс, но плюс сомнительный. Когда зачем-то нужно посмотреть исходный код страницы, а там вместо ожидаемого порядка (слева направо, сверху вниз) всё расположено не пойми как — возникают только негативные эмоции.
2) В таблицах сложно сделать скруглённые углы и подобное. Ну, возможно. Хотя если использовать таблицы + css (css — не для вёрстки а для уточнения оформления) то наверно несложно.
Есть 2 ключевых отличия (в одних задачах это преимущество, в других не очень, но всё же):
- Двумерность. Флексбоксы — это одна длинная «колбаса», в крайнем случае — куски нарезанной длинной колбасы, уложенные рядом друг с другом (или длинная «гирлянда из ромашек», по наглядной схеме из этой статьи). Гриды — честная двумерная сетка (да, почти таблица, только описанная чисто в CSS и не зависящая от разметки).
- В гридах в общем случае размеры задаются на уровне контейнера. Во флексбоксах (и во всём, что было до них) — на уровне контента. Есть всякие трюки, чтобы сделать наоборот, но по умолчанию гриды строятся «снаружи внутрь», а флексбоксы и всё прочее — «изнутри наружу».
While flexbox is designed for one-dimensional layout, Grid Layout is designed for two dimensions — lining things up in rows and columns.
MDN — Grid Layout
Если ничего специально не делать — в простую последовательность блоков, друг под дружкой, в одну колонку. Для древних мобильников вполне сойдет:). Если принять минимальные меры, может изящно деградировать до старых добрых флоатов, инлайн-блоков (гриды, как и флексбоксы, просто переопределят их) или CSS-таблиц (тут могут быть нюансы в IE, но в целом и они решаемы).
Пример: насколько понимаю, тот же Pale Moon не поддерживает сейчас CSS grid.
github.com/FremyCompany/css-grid-polyfill/blob/master/bin/css-polyfills.js
В старой Мозиле работает. В более современных по версиям хроме и опере — не работает.
Очень жаль, потому как идея хорошая.
Может я что-то накосячил?
А можно увидеть проблемный пример? И заодно уточнить версии, где не работает?
По факту.
На XP в Мозиле все работает корректно, в Опере и Хроме блоки располагаются столбиком, вместо строчки при любом экране.
На win10 все работает корректно во всех трех броузерах.
Может в личку скинуть ссылки?
Т.е. если у большинства экран 15 дюймов, то логично все затачивать и проверять под 15 дюймов, а не под 23 :)
В принципе, я выкрутился. Смотрится нормально, а в новых броузерах вообще хорошо.
Да, проблема явно в том, что Мозилла перестала обновляться на XP с 52-й версии (успев выпустить гриды), а Хром и Опера — видимо, где-то в районе 49-й и 34-й соответственно, еще до появления в них гридов:(. Боюсь, что с этим ничего не поделать, так же, как с 4-м андроидом. Но надо смотреть свою статистику — возможно, пользователей с XP устроит изящная деградация, а большинство с более новых ОС оценит преимущества новинки?
Спасибо, записал в свободную ячейку памяти.
<@insomnia> cfdisk /dev/hda && mkfs.xfs /dev/hda1 && mount /dev/hda1 /mnt/gentoo/ && chroot /mnt/gentoo/ && env-update &&. /etc/profile && emerge sync && cd /usr/portage && scripts/bootsrap.sh && emerge system && emerge vim && vi /etc/fstab && emerge gentoo-dev-sources && cd /usr/src/linux && make menuconfig && make install modules_install && emerge gnome mozilla-firefox openoffice && emerge grub && cp /boot/grub/grub.conf.sample /boot/grub/grub.conf && vi /boot/grub/grub.conf && grub && init 6
<@insomnia> это первая
Спасибо за статью. Продолжайте.
Делаем адаптивный HTML, добавляя одну строку в CSS