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

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

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

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

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

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

.table {

/* state-a layout style */

@media (min-width: 600px) { /* state-b layout style */ } }

12345678910111213   

   .table {    /* state-a layout style */     @media (min-width: 600px) {        /* state-b layout style */    }  }

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

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

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

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

CSS .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 */ }

}

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

 

Код, определенный в классе .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-коде (два раза, если у вас есть два модификатора, но быть может и больше, если для вас необходимы доп варианты!).

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

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

Решение

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

CSS .table { /* state-a layout style */

}

.table—state-b { /* state-b layout style */

}

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

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

CSS .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; }

}

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 var layout = getComputedStyle(table).getPropertyValue(‘—table-layout’);

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

12 var 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 и поменять его содержимое при помощи модификаторов класса:

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

CSS .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’; }

}

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.

Источник

Вам также может понравиться