Больше никаких CSS Grid фреймворков

Больше никаких CSS Grid фреймворков

От автора: пару минут назад я прочитал пост на Designer News. Пост написал парень, который хочет создать очередной CSS grid фреймворк, основанный на flexbox. Скорее всего, он знает, что таких фреймворков уже полно в сети, но это не удержало его от того, чтобы узнать, что по этому поводу думают другие.

Причиной этому, скорее всего, послужило то, что человек просто любит кодить, а также понимает, что действительно крутых grid фреймворков достаточно мало. Я считаю этой неплохой идеей создать еще один фреймворк, потому что я хочу, чтобы у людей оставалась мотивация для осуществления своих идей (не важно, сколько разработчиков уже проделали то же самое). НО только если все это делается с целью обучения, а не для кого-то.

Почему так? Потому что в скором будущем эти фреймворки вообще не будут нужны. Это может прозвучать странно, но ниже я все объясню:

Я не знаю, чем пользуетесь вы, но вот уже пару лет я использую только grid фреймворки для выравнивания контента и создания отзывчивых макетов верстки. Со временем пара аспектов изначальной идеи сайтостроения изменились: веб-сайты теперь, в основном, проектируются в первую очередь под мобильные устройства (к счастью). Flexbox с его свойствами позволяет достигать поставленных задач по созданию эффективных CSS-макетов намного быстрее. К примеру, отдельные свойства flexbox помогают выравнивать высоты колонок, построенных в ряд, не зная размеров контента, что можно заменить на код JS.

До сих пор данный способ был чуть ли не лучшим для создания надежных макетов (без написания пользовательской grid, естественно). К счастью, теперь нам стало намного легче, благодаря grid.

Что же в нем такого хорошего

По существу, это новый CSS метод, который позволяет создавать красивые макеты сайтов без использования огромных grid фреймворков. Grid предоставляет вам доступ к множеству свойств, которые подсказывают браузеру как позиционировать элемент на странице, и не важно какой бюджет у клиента, и насколько сжаты сроки выполнения.

Самое удивительное в том, что браузер вообще не волнует расположение элемента в HTML коде. Например, колонка, которую вы хотите отобразить в верхнем правом углу окна, может находиться прямо перед закрывающим тегом body (после всех остальных тегов).

Это чем-то похоже на действие position: absolute, но без необходимости прописывать позиционирование элемента попиксельно. Grid сама просчитает это – W3C описывает такое поведение, как независимость порядка в исходном коде (source-order independence).

Поддержка браузеров

Так как технология еще нова, в данный момент только один браузер поддерживает эту технологию по умолчанию: вы не поверите, но… не могу не смеяться… ладно, это всеми любимый друг Internet Explorer. Но не беспокойтесь, все не так плохо: все еще необходимо использовать –ms префикс. Теперь немного понятнее? Не могу перестать смеяться.

В любом случае, если вы не пользуетесь IE (позор вам), вы можете активировать эту функцию через флаг «экспериментальные возможности веб-платформы» в chrome://flags для браузеров Chrome и Opera.

Так что, это альтернатива flexbox?

НЕТ! Только не начните бегать по офису и кричать «Нафиг ваш flexbox», ОН ВСЕ ЕЩЕ НУЖЕН!

Данные два свойства используются в совершенно разных случаях. Первое display: grid можно использовать для создания основного макета верстки вашего веб-приложения или сайта, но не для выравнивания боксов с контентом. В этом случае вам поможет display: flex. Используется, к примеру, для выравнивания высоты колонок, стоящих в один ряд. Подведем итог. Какое свойство для чего использовать:

Grid: — для макета

Flex: — для контента

Достаточно просто, не правда ли?

И чего же вы ждете? Открывайте Chrome, включайте флаг экспериментальных возможностей и тестируйте grid! Если вы запутались или просто хотите больше узнать о том, как точно работают эти свойства и как их использовать, загляните в документацию W3C.

Нам всем следует принимать участие в развитии этих свойств, так как существует гораздо больше неизученных случаев их использования. Я думаю, это на самом деле огромный шаг к миру, свободному от громоздких и пожирающих много оперативной памяти CSS фреймворков.

Источник: www.leo.github.io

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Инспектор сайтов

    Короче слушайте товарищи! Ваше нововведение с выдвигающимся рекламным блоком после прочтения статьи полная лажа, бесит просто до невозможности. Мало того, что кнопка закрытия мелкая, так с телефона вообще хрен закроешь. Надеюсь на то, что вы пересмотрите свое отношение к таким вещам, потому что со стороны это и выглядит круто, но для пользователей это ад! Хочешь пролистать к нижнему меню или посмотреть комменты, а тут эта полоска противная все перекрывает. И так на каждой статье. Терпеть уже нет сил

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree