Я учусь пилотировать легкие самолеты. Это отвлекает меня от компьютеров. Недавно мне никак не удавалось удержать Сессну-150 на малой высоте, когда мы приближались к аэропорту Бристоля. Меня буквально засосало в облако восходящим потоком. Мой летный инструктор сказал: «Это не ваша вина, но ваша проблема». Он имел в виду, что я обязана была удерживать высоту, пусть даже что-то работало против меня. Мне нужно было узнать, что бывает такая ситуация, и научиться справляться с ней при пилотировании.
Уже после приземления я подумала, что фраза «это не ваша вина, но ваша проблема» отлично подходит практически к любым ситуациям. В этой статье я раскрываю тему поддержки старых браузеров при использовании новых технологий наподобие CSS Grid Layout. Мы, разработчики, часто робеем при обсуждении браузерной поддержки с заказчиками и коллегами, как будто это мы виноваты в том, что сайты не выглядят в IE9 в точности так же, как в новейших Firefox или Chrome. Пора нам уже принять, что это не наша вина. Но обязанность справиться с этим как следует, с пользой для каждого — во многом наша проблема.
Гриды совсем новые! У них наверняка ужасная поддержка в браузерах?
CSS Grid Layout уже работает в Chrome, Firefox, Opera и Safari с марта этого года. Microsoft Edge недавно выпустил предварительную сборку с гридами за флагом. На момент выхода статьи Can I Use показывает, что глобальная поддержка CSS Grid Layout составляет 65.64%, или 70.75%, если добавить версию с префиксом из IE10-11 и теперешнего Edge. До сих пор мы не видали, чтобы настолько грандиозная новинка внедрялась так быстро. Неудивительно, что люди не осознают, у какого множества посетителей поддержка будет.
Не стоило об этом и упоминать, но я всё равно скажу, что у вас цифры могут быть больше или меньше в зависимости от аудитории вашего сайта. Но если вы прямо сейчас делаете новый сайт, есть хорошая возможность воспользоваться преимуществами CSS Grid Layout.
Зачем мне использовать гриды?
Как я объясняла в предыдущей статье, CSS Grid Layout дает возможность делать двумерную раскладку без дополнительной разметки для оборачивания рядов. Поскольку раскладка двумерная, элементы в ней могут охватывать несколько рядов, надежным и предсказуемым образом.
Можно добиться некоторых приятных дизайнерских эффектов. Например, чтобы элементы в дизайне были как минимум определенной высоты, но растягивались при более высоком контенте — как в этом примере.
Можно легко чередовать элементы фиксированной ширины с гибкими элементами, с помощью единицы fr в гриде. Благодаря этому проще иметь дело с элементами макета, которые должны сохранять фиксированный размер.
Можно переопределять раскладку на уровне контейнера, что делает отзывчивый дизайн элементарной задачей, и настраивать дизайн индивидуально при различных размерах окна.
Можно накладывать элементы друг на друга, они подчиняются свойству z-index, так что разные элементы можно помещать в одни и те же грид-ячейки, что дает массу простора для творчества.
А как же неподдерживающие браузеры?
В CSS есть для вас решение. Во-первых, в спецификациях гридов и флексбоксов уже точно определено, как эти спецификации переопределяют старые методы раскладки.
Таким образом, если вы хотите использовать флоаты, инлайн-блоки, многоколоночную раскладку, флексбоксы или даже display: table в качестве фолбэка для своей раскладки на гридах, в спецификации уже всё предусмотрено. Можете переопределять эти методы надежным и предсказуемым способом. Я сделала шпаргалку с пояснением фолбэков. О некоторых из них говорится в моем докладе, записанном на конференции Render ранее в этом году.
В CSS также есть проверка наличия возможностей. У нее поистине замечательная поддержка браузерами, и что особенно радует в связи с ней, вам не нужно беспокоиться о браузерах без ее поддержки. Не бывает браузеров, поддерживающих гриды и не поддерживающих supports. Вот всё, что нужно вам в CSS-файле:
- CSS для фолбэка
- CSS для гридов
Все браузеры поймут стили для фолбэка. Те, что не поддерживают гриды, на этом и остановятся. А те, что поддерживают, будут использовать стили для гридов, и благодаря правилам, которые описаны в спецификации и поясняются в моей шпаргалке, многое в фолбэчном поведении обнулится.
Как правило, в стилях фолбэка у вас останется что-то, что «просочится» в раскладку на гридах. Часто это бывает ширина элементов, поскольку в старых раскладках приходится задавать им ширину, чтобы имитировать что-то похожее на грид. Поэтому мы используем простую директиву supports, проверяем поддержку гридов, и в ней, может быть, возвращаем ширине значение auto. Вообще там можно делать для грид-версии что угодно, не опасаясь, что это увидят старые браузеры.
Мы пишем CSS с помощью CSS. Никаких полифилов, никаких хаков. Всё строго по спецификации.
Но фолбэки означают, что я пишу раскладку дважды!
Это верно лишь если вы в своей работе исходите из того, что сайты должны одинаково выглядеть во всех браузерах. И знаете что? Это ни к чему.
Вот статья, которую я написала в 2002 г. В 2002-м люди боялись изучать верстку на CSS, потому что это значило бы, что их сайты не будут «одинаково отображаться» во всех браузерах. Но я верстала сайты с помощью CSS, стараясь выяснить, как это можно сделать наилучшим образом, и учила других людей тому, что узнавала сама. С самого открытия собственной фирмы, делая сайты для клиентов, требующих, чтоб всё работало в Netscape 4. Я занимаюсь этим на протяжении всей своей карьеры. Я разбираюсь с проблемами совместимости уже 20 лет. Сейчас я делаю продукт с интерфейсом, который должен работать вплоть до IE9. Не моя вина, что эти старые браузеры существовали, но моя проблема и моя работа все эти годы как раз в том и состояла, чтобы справляться с ними.
Если ваш сайт действительно должен выглядеть одинаково во всех браузерах (что бы это для вас ни значило), вы не сможете использовать ничего, что можно сделать только гридами. В таком случае не используйте гриды! Используйте Grid Layout, если хотите добиться чего-то, чего никак не сделать нормально старыми технологиями. Затем делайте фолбэк, которым можно будет пользоваться в менее продвинутых браузерах, и не беспокойтесь о том, чтобы сделать в точности так же. Мощь гридов в том, что с ними можно делать такое, что раньше было невозможным. Используйте их для этого, а не для воссоздания своих старых дизайнов.
Хочу волшебный полифил!
Если глобально подпереть полифилом весь макет, для пользователей это будет кошмаром. Если реализовать то, что делают гриды, средствами JS, это всё будет жутко тормозить. Загрузка страницы в итоге будет выглядеть ужасно «дерганой». Гораздо лучше дать этим старым браузерам вариант попроще, адаптированный к их возможностям, чем пытаться насильно впихнуть в них грид-раскладку скриптами.
Попытки сделать полифил могут существенно затянуть вам сроки разработки и тестирования, причем для меньшей группы пользователей. Опять же, если одинаковый вид для всех — идеал для вашего сайта, я бы не советовала использовать гриды прямо сейчас. Вам придется принять, что все те пользователи, которые могли бы насладиться грид-раскладкой, будут ее лишены из-за наличия в мире старых браузеров.
Вот что значит разрабатывать для веба
Работа в вебе немыслима без вещей, у которых еще нет полной поддержки. Такова природа той отрасли, в которой мы работаем. Ваша работа состоит в том, чтобы нащупать неизбежный технологический компромисс для каждого проекта.
Ваша работа состоит в том, чтобы изучать новое и советовать своему клиенту или руководству, как наилучшим способом реализовать их бизнес-цели при помощи всех доступных технологий. А для этого вы должны сначала сами изучить эти новинки. Тогда вы сможете советовать им, на какие именно компромиссы пойти стоит. Гарантировать единообразный дизайн ценой добавочной разметки, лишнего времени на разработку или вынужденного ограничения удобства для всех браузеров? Или упрощенный макет для IE9, что позволит сократить время разработки, и более быстрый сайт благодаря новым технологиям в итоге? Если вы понимаете плюсы и минусы каждого варианта, вы сможете отстоять свои аргументы.
Если использование новой технологии не дает абсолютно никаких преимуществ, то и не используйте ее. Но если ваш клиент хочет чего-то такого, что есть смысл делать только на новых технологиях типа гридов, или что на гридах можно сделать быстро, а без них придется долго мучиться, у вас есть куча способов объяснить возможные компромиссы, их выгоду и цену.
Объясняйте их тем, сколько времени на разработку, сейчас и в будущем, можно будет сэкономить благодаря меньшей сложности.
Объясняйте их тем, что дизайнеры создали потрясающий дизайн, который просто невозможно надежно сверстать без гридов.
Объясняйте их быстродействием, во многих случаях этот аргумент сработает, потому что можно будет избавиться от громоздкого фреймворка, без которого иначе было бы не обойтись.
Всё это мы получим в обмен на требование отдавать упрощенный макет старым браузерам. Но это не значит «никакого макета». Будьте готовы объяснить и то, что внедрение гридов в браузеры не похоже на внедрение чего бы то ни было в CSS, что мы видели прежде. Реализации уже совместимы как никогда. Edge уже обновил гриды за флагом в предварительной сборке. Браузеры без поддержки исчезают намного быстрее, чем можно было бы ожидать по прошлому опыту.
Когда вы вооружены всей нужной информацией о цене вопроса, дискуссия становится очень простой. То, что старые браузеры существуют — не ваша вина. Не начинайте этих дискуссий так, как будто это вы провалили задание добиться, чтобы сайт выглядел одинаково во всех браузерах, выпущенных за последние 10 лет, используя при этом технологию, которой нет и года. Это не ваша вина, но ваша проблема. Ваша проблема, ваша обязанность как веб-профессионала, поставить себя в такие условия, в которых вы сможете выбирать правильный курс действий для каждого проекта.
Вот к чему мы идем
Переход от табличной верстки к CSS изменил облик веба. Он увел нас от попиксельно нарезанных картинок к чему-то более гибкому, с текстом в основе, менее похожему на печатный дизайн. Последние 15 лет облик веба диктовался техническими ограничениями CSS. Думаю, что наши новые раскладочные методы — гриды, флексбоксы и штуки вроде веб-фигур — изменят его облик снова. Но мы должны дать этому случиться, нам надо позволить себе экспериментировать, учиться и творить новое.
Мы сможем сделать это, только если готовы показывать преимущества этих методов тем людям, для которых мы делаем сайты и приложения. Мы можем сделать это, только если отбросим наши предрассудки о вебе, браузерах и темпах внедрения хотя бы до тех пор, пока не изучим все эти штуки. Только тогда мы сможем принимать правильное решение для каждого проекта. Никогда не будет четкого «или — или», всегда будут компромиссы. Наша работа — справляться с этим, как и всегда.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
malinichev
Спасибо!
psywalker
Скажите это самой Рейчел Эндрю, а лучше порадуйте её новостью, что вы уже давно используете гриды в своих проектах, и уверен, что она будет очень рада это слышать :)
pvasili
Лучше её посмотреть. Даже в переводе
psywalker
Согласен, спасибо за ссылку!
SelenIT3
Последнее время в околофронтендной тусовке всё чаще звучит мысль, что пора уже использовать гриды именно в порядке прогрессивного улучшения (например, недавняя статья замечательной фронтенд-разработчицы из «Нью-Йорк Таймс»). Но от главного, пожалуй, эксперта по гридам в мире эти аргументы звучат убедительнее:). Спасибо за перевод!
kordenv
спасибо за статью
с grid не работал, подскажите пожалуйста, чем grid возможно лучше или хуже flex (или правильнее сказать, что есть у одного, чего нет у другого)? сейчас плотно работаю именно с flex и все вроде как устраивает :) grid для меня пока неизвестность…
спасибо
psywalker
Здравствуйте! Эх, печально конечно, что вы ещё даже не познакомились с этим потрясающем модулем. Но никогда не поздно начать, и мы очень рады, что вы проявляете интерес. Я бы посоветовал вам начать вот с этих трёх статей (раз, два, три), ну а после пробежаться по остальным. Так будет намного лучше, чем описывать (что, в принципе, невозможно) это в одном комментарии :)
kordenv
оки, спасибо, обязательно почитаю :-)
Ashot
Или сразу читайте здесь – тут вся инфа о гридах собрана в одной статье.
SelenIT3
Главные отличия гридов от флексбоксов:
flex-wrap: wrap), а гриды двумерные;Соответственно, в гридах элементы сохраняют вертикальные связи между собой (примерно как в таблице, но без доп. разметки), так что их всегда можно расставить по аккуратной сетке. И могут отрисовываться по мере загрузки без "перескоков", поскольку положение каждого элемента можно задать независимо от других (как с
posiition:absolute, но лучше:). Зато на флексбоксах проще заполнять контейнер элементами разной величины (напр. картинками разных пропорций) — тут вертикальные связи скорее мешают. Но если размеры элементов известны заранее, то с минимальными дополнительными усилиями из гридов можно сделать что-то вроде Masonry.В общем, свои преимущества есть везде, но «по сумме баллов» гриды круче:)
dom1n1k
Поддержка в 65-70% — это много или мало? Всё относительно.
Для свойств декора, типа скругленных уголков или теней — это очень хороший уровень, их можно и нужно использовать. Старым браузерам по возможности давать фолбеки, а если это невозможно или сложно, да и фиг с ними.
Для скелета страницы, который держит на себе всё — это абсолютно неприемлемо, за исключением редких узконишевых проектов. Для массового продакшена нужны 95% — чтобы не заморачиваться с отсталыми браузерами, а лишь слегка подпереть их костыликами, «лишь бы читалось». А сейчас фактически придется делать две параллельные верстки, обе их отлаживать, тестировать и поддерживать. Зачем? Зачем мне делать красиво, если потом все равно придется всё это повторить не очень красиво? Собственно, хорошо было сказано А. Симоненко и О. Алексашенко.
Вангую, что мейнстримом гриды станут только года через полтора.
SelenIT3
В статье Рэйчел же как раз объясняет, что не нужно делать две параллельные верстки. Нужно делать одну
тупуюпростую верстку, хоть в одну колонку (которая вполне удовлетворит и старые мобильники, и ископаемые IE на древних офисных 1024х768), а поверх нее навешивать красоту для тех, кто может (а это уже большинство).Конечно, от кого требуют
четкой цветной картинки на черно-белых телевизорахполной красоты в ископаемых IE, тем гриды пока не показаны. Но тут можно лишь посочувствовать… причем, как показано в статье, в первую очередь юзерам.dom1n1k
Тут я солидарен с тов. Станиславским.
Wano987
А теперь расскажите это заказчику.
SelenIT3
Так Рэйчел в статье же как раз показывает, как объяснить это заказчику, разве не так? :)
psywalker
Плюсы от «написания двух версий» всё же есть. Поскольку гриды уже поддерживаются во всех современных (ну Edge скоро догонит) браузерах, а значит велика доля вероятности, что бОльший процент аудитории вашего сайта увидит именно грид-версию. А плюсы, которые он от этого получит, это, к примеру, та же скорость, а ваши разработчики, которые поддерживают сайт, так же получат плюсы в виде лёгкой поддержки сайта. И что касается «писать лишние стили для гридов», то тут тоже ничего страшного нет, поскольку для решения задачи вёрстки того же каркаса может потребоваться всего одна строка кода (гриды настолько сильны, что порой большего не требуют). Всё это с лихвой окупает затраты, я считаю ;)
i360u
В каждой конкретной ситуации, использование гридов может быть как абсолютно оправдано и единственно-верно (для какого-нибудь концептуального блокчейн-стартапа) так и абсолютно неприемлемо (для сайта гос-организации). Нет никакого "массового продакшена" сферического в вакууме, есть конкретные бизнес-задачи.
dom1n1k
Под массовостью я подразумевал проекты для широкой аудитории, которую нельзя очертить например техногиками (все пользуются современными браузерами) или интранетом одной организации (браузер поставят какой нужно).
Если нельзя нарисовать четкие границы аудитории — это оно.
jankovsky
Конечно, используйте. Только потом не удивляйтесь, что не найдете grid-layout в актуальной спецификации, а так же поддержки в современных браузерах. Ничего лучше чем верстка таблицами еще не придумали.
SelenIT3
Что вы считаете «актуальной спецификацией»? Статус REC у W3C? Так он у них означает не «актуальный стандарт», а «добрый старый теплый ламповый стандарт»:). Актуальными и рекомендованными к повседневному использованию сам W3C считает спецификации начиная со статуса кандидата (CR). У гридов статус именно такой.
И какие «современные браузеры» вас беспокоят? Samsung Internet? Он на базе Хромиума, так что получит гриды уже с одним из ближайших обновлений. В Edge гриды тоже уже на подходе, можно даже пощупать в превью. А браузеры 2014 года и старше не современные по определению и вполне могут довольствоваться упрощенным фолбэком.
Akuma
Что-то я пропустил, куда делся Flexbox? Про него уже все забыли?
Вроде он так и не начал нормально использоваться (имею ввиду нормальное использование, а не подпорку фалбеками), а уже гриды начали обсуждать.
Причем, ладно это были мелочи типа скругленных уголков — не работает и хрен с ним. Но тут же сетка страницы. Если она не работает, то всей странице каюк. Какой смысл использовать гриды для общедоступных страниц? (да и flexbox).
P.S. Отмазка типа «это же так просто писать» не прокатит, т.к. в любом случае прийдется писать float + grid вместо одного float, а это в любом случае больше.
bro-dev
Последнее время какая то тенденция всё перемудрить, то есть сделать сложнее чем необходимо, и это касается и flex. Зачем вводить новые типы блоков, или единицы измерения когда можно чуть допилить уже существующую модель и всё бы работало. Имхо достаточно было сделать норм работу height 100%, vertical-align и выравнивание по ширение для блоков тоже. Всё бы работало так как и ждет от этого верстальщик и не нужно было никаких комплексных гайдов по флексбоксам, всё было интуитивно.
SelenIT3
Над этим уже работают (см. тут ближе к концу). Но возможность описывать расположение блоков полностью отдельно от разметки, которую дают гриды, ценна сама по себе.
SARFEX
Спасибо за перевод отличной статьи. Даже не думал что поддержка уже достигла 70%. Этого вполне достаточно для того, чтобы оставить текущий дизайн в качестве фолбека, и начать смотреть в будущее в котором останется только CSS Grid Layout. Саму технологию уже пощупал и в восторге.
NLO
НЛО прилетело и опубликовало эту надпись здесь
i360u
Будь ваша воля, вы смогли бы сверстать только простую гипертекстовую страницу и никогда бы не сделали удобное отзывчивое веб-приложение способное на что-то более сложное, чем ввод логина и пароля. Но вам, в вашем 2000-м, видимо виднее как оно надо...
NLO
НЛО прилетело и опубликовало эту надпись здесь
i360u
Гриды — очень мощный и удобный инструмент, он способен спасти ваше положение и сэкономить уйму времени в разных нестандартных ситуациях. Однако, на текущий момент, они работают только если с их помощью позиционировать элементы, являющиеся прямыми потомками грид-контейнера, а поэтому, делать с их помощью что-то более сложное чем простые лейауты — не получится, к сожалению. Спецификации сабгридов пока в зачаточном состоянии...
SelenIT3
Да, это очень досадное ограничение.
Но в очень многих случаях его можно обойти с
display:contents, которое давно уже работает в Фоксе, есть за флагом в Хроме (CanIUse и MDN это скрывают, но не верьте им, а попробуйте сами!) и вот-вот полноценно появится в Сафари (уже распознается, но применяется пока только к элементу<slot>).Давайте дружно пинганем MS на эту тему, чтобы они не в очередной раз не обломали нам кайф! :)
i360u
Не спорю, display:contents — свойство очень полезное (и не только для гридов), но FF, к сожалению, потерял право быть полноценным референсным браузером, а всерьез использовать свойства спрятанные за флагом в Хроме никто не будет в рабочем проекте. Пока можно только ждать и надеяться.
SelenIT3
Увы, с последним не поспорить. Но я рассчитываю, что Хром откроет его очень скоро (в феврале была надежда уже на 59-ю версию, видимо, что-то подзатянулось, вероятно, из-за непоняток с самой спекой… но вроде их уже разрулили). Да и Сафари не будет тянуть, а то его нынешнее поведение, что
@supports(display:content)вроде бы true, а реально применить нельзя, в общем-то вполне себе баг!Ну и Фокс, по-моему, рано списывать (либо самое время «дать ему второй шанс»). В очень многих моментах он прорабатывает поддержку новинок тщательнее того же Хрома (напр. сразу включил
space-evenlyи для гридов, и для флексбоксов), в его отладчике появляются просто незаменимые фичи (тот же инспектор гридов!), а с новыми версиями, где уже многопроцессность и всё такое, он и вовсе молодцом. Как минимум, как давно одна моя коллега цитировала другую свою коллегу, «гораздо не хуже» других:)dom1n1k
Предлагаю администрации (@Boomburum) опубликовать браузерную статистику Хабра, хотя бы в самых общих чертах.
А то мы тут оперируем сферической поддержкой гридов в вакууме для абстрактной аудитории.
Но допустим, задумал я ресурс для айтишников — будет ли там поддержка больше? Ну то есть понятно, что будет, но насколько? Лично для меня это абсолютно неочевидно. Может быть, там гриды заработают к 95%, потому что гики сидят на современных браузерах. А может быть, всего лишь у 75%, потому что помимо гиков, у Хабра полно казуальных читателей.
И вообще, так ли уж сильно отличаются сферическая «обычная» аудитория от сферической «гиковой»?