Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах Сайтостроение

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

От создателя: новейший подход к адаптивности контент-зависимых компонент — модификаторы. Планирование адаптивного поведения компонента быть может сложный задачей, в особенности когда его содержание очень влияет на компоновку компонента.

К примеру, давайте разглядим компонент таблицы. Вы сможете решить применять две разные схемы: одна — оптимизированная для маленьких экранов (макет state-a), иная — для огромных экранов (макет state-b). Потом для вас необходимо будет избрать контрольную точку для конфигурации макета и установить ее в CSS при помощи медиа-запроса. Но один и этот же компонент таблицы может иметь два либо 20 столбцов.

Если в таблице не много столбцов, вы сможете поменять макет на маленький контрольной точке:

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

В то же время, для таблицы с огромным количеством столбцов либо огромным количеством содержимого вы сможете поменять ее позднее, чтоб на малеханьких экранах она не смотрелась очень переполненной:

Использование адаптивных модификаторов для управления изменениями компоновки в компонентах

В эталоне, вы должны отыскать контрольную точку, которая работает для обоих (и для всех остальных таблиц на веб-сайте). Вы сможете применять класс .table для определения стиля макета state-a, и применять медиа-запрос, чтоб переписать этот стиль для макета state-b:

12345678910111213<table class=»table»>  <!— table content —></table> <style>  .table {    /* state-a layout style */     @media (min-width: 600px) {        /* state-b layout style */    }  }</style>

Это решение быть может не безупречным, так как избранная вами контрольная точка является компромиссом: в итоге вы сможете получить несколько таблиц, которые смотрятся очень переполненными, а остальные — очень разреженными. Даже если вы отыщите решение, которое, кажется, подступает для текущих таблиц, оно может просто сломаться с будущими.

Содержание
  1. Модификаторы класса
  2. Решение
  3. Недочеты?
READ
Google не наказывает сайты за отсутствие файла Sitemap

Модификаторы класса

Вероятной кандидатурой будет определение модификаторов адаптивных классов (классов, которые имеют один и этот же стиль, но нацелены на различные контрольные точки), чтоб иметь возможность инициировать изменение макета в различных контрольных точках.

Если мы разглядим пример с 2-мя контрольными точками (малая и средняя), вы получите:

CSS

1234567891011121314151617.table {  /* state-a layout style */} /* small breakpoint */@media (min-width: 600px) {  .table—state-b@sm {    /* state-b layout style */  }} /* medium breakpoint */@media (min-width: 1000px) {  .table—state-b@md {    /* state-b layout style */  }}

Потом вы сможете применить эти модификаторы к разным элементам table на базе их содержимого:

12345<!— switch layout at a small breakpoint —><table class=»table table—state-b@sm»></table> <!— switch layout at a medium breakpoint —><table class=»table table—state-b@md»></table>

Код, определенный в классе .table—state-b@sm, таковой же, как и в .table—state-b@md. Помните, что эти два класса употребляются для сотворения схожего макета; он применяется лишь в различных контрольных точках.

Этот подход имеет два главных недочета. 1-ый — это возможность поддержки кода: если для вас необходимо внести конфигурации в макет state-b, для вас необходимо обновить два различных класса (.table—state-b@sm и .table—state-b@md). Это то, что вы сможете решить, используя препроцессор CSS (к примеру, миксины SASS).

2-ая неувязка заключается в том, что CSS-код для state-b повторяется пару раз в окончательном CSS-коде (два раза, если у вас есть два модификатора, но быть может и больше, если для вас необходимы доп варианты!).

READ
Поисковик Apple будет оценивать сайты по силе их влияния

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

Решение

Работая над группой «Таблица» библиотеки компонент в CodyHouse, мы употребляли иной подход; мы обусловили класс для макета state-b:

CSS

1234567.table {  /* state-a layout style */} .table—state-b {  /* state-b layout style */}

Потом мы обусловили пользовательское свойство CSS —table-layout снутри класса .table и изменили его значение при помощи модификаторов класса:

CSS

123456789101112131415.table {  —table-layout: state-a;} @media (min-width: 600px) {  .table—state-b@sm {     —table-layout: state-b;  }} @media (min-width: 1000px) {  .table—state-b@md {     —table-layout: state-b;  }}

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

Используя JavaScript, мы можем проверить, добавлять либо удалять класс .table—state-b, основываясь на значении этого пользовательского характеристики CSS. В итоге будет использован подходящий стиль макета!

JavaScript

12var layout = getComputedStyle(table).getPropertyValue(‘—table-layout’);table.classList.toggle(‘table—state-b’,  layout == ‘state-b’);

Этот способ дозволяет нам применять один класс (.table—state-b) для стиля макета, независимо от медиа-запроса. Добавление новейшего варианта просит лишь установки значения отдельного пользовательского характеристики CSS. Нет повторения кода!

В этом примере мы работали с таблицами, но вы сможете применить эту технику к хоть какому компоненту, чье адаптивное поведение зависит от его содержимого.

Недочеты?

Этот подход просит JavaScript, но это не обязано быть неувязкой: если JS выключен, мы обслуживаем версию таблицы state-a, которая стопроцентно доступна.

Как насчет поддержки пользовательских параметров CSS? Использование переменных CSS, возможно, самый незапятнанный и понятный метод. Но если для вас необходимо поддерживать наиболее старенькые браузеры (к примеру, IE 11 и ниже), вы сможете применять псевдо-элемент ::before и поменять его содержимое при помощи модификаторов класса:

READ
Используйте CSS Grid в производстве — сегодня

CSS

12345678910111213141516.table::before {  display: none;  content: ‘state-a’;} @media (min-width: 600px) {  .table—state-b@sm::before {      content: ‘state-b’;  }} @media (min-width: 1000px) {  .table—state-b@md::before {      content: ‘state-b’;  }}

В JS вы сможете проверить значение содержимого ::before, а не пользовательское свойство. Этот же итог, наиболее широкая поддержка! Вы сможете принять решение, исходя из собственных потребностей.

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

Создатель: Claudia Romano

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

Источник

Оценить статью
Блог о самом интересном.