Шаблон PHP:
<div
class="el"data-spacetop="<?php echo $spacetop; ?>"data-spaceleft="<?php echo $spaceleft; ?>"data-spacetopmobile="<?php echo $spacetopmobile; ?>"data-spaceleftmobile="<?php echo $spaceleftmobile; ?>"></div>
HTML:
<div class="el" data-spacetop="228" data-spaceleft="876" data-spacetopmobile="90" data-spaceleftmobile="20"></div>
CSS:
.el {
padding-top: attr(data-spacetop) px;
padding-left: attr(data-spaceleft) px;
}
@media screen and (max-width:600px) {
.el {
padding-top: attr(data-spacetopmobile) px;
padding-left: attr(data-spaceleftmobile) px;
}
}
Если бы это сработало, это было бы просто замечательно. К сожалению, это не так, хотя проект W3C существует уже давно (https://caniuse.com/#feat=css3-attr).
Как бы вы решили эту проблему? К сожалению, встроенные медиа-запросы тоже не поддерживаются.
Если вам нужна поддержка современного браузера, вы можете использовать новый свет CSS
пользовательские свойства вместо data-attributes
а также attr()
наценка
<div class="el"style="--spacetop:40px;
--spaceleft:20px;
--spacetopmobile:10px;
--spaceleftmobile:5px
"></div>
CSS
.el {
border: 1px #bc9 dashed;
padding-top: var(--spacetop);
padding-left: var(--spaceleft);
}
@media screen and (max-width:600px) {
.el {
padding-top: var(--spacetopmobile);
padding-left: var(--spaceleftmobile);
}
}
Этот синтаксис правильный:
padding-top: attr(data-spacetop px);
а также
padding-top: attr(data-spacetop px,fallback);
но используйте это свойство в двух вышеописанных методах, которые не поддерживаются основными браузерами.