От создателя: новейший подход к адаптивности контент-зависимых компонент — модификаторы. Планирование адаптивного поведения компонента быть может сложный задачей, в особенности когда его содержание очень влияет на компоновку компонента.
К примеру, давайте разглядим компонент таблицы. Вы сможете решить применять две разные схемы: одна — оптимизированная для маленьких экранов (макет 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.
Источник
Вам также может понравиться