Ответы пользователя по тегу CSS
  • Как реализовать на сайте динамический css?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. CSS переменные (сразу смотри поддержку браузерами).
    2. Выводить данные в теге <style> на этапе генерации страницы (частый метод в WP темах):
    <head>
        ...
        <style>
            .classname {
                color: <?= $settings['classname_color']; ?>;
            }

    Ничего сложного, на WP все формируется внутри PHP файлов, которые так могут из коробки, главное занести переменную в вид из конфигу (как и любую другую для вывода, собсно).
    3. Генерировать CSS-файл, который будет подключен в тело.
    4. При выводе генерировать инлайновые стили в тегах (о ужес, но так можно).
    5. Передавать в JS, которым генерировать динамические стили. Принцип описан в документации JS. Вопрос только в том, как туда данные попадут, это может быть, скажем метод а-ля API, чтобы за-fetch-ить JSON или занос в переменную прямо в тело:
    <script>
        var data = <?= json_encode($settings); ?>
        document.querySelector('.classname').style.color = data.classname_color;


    Конечно, под все методы, кроме первого, у тебя должны быть согласованы с бэком отправители, так и адресаты изменений, фолбэки и т.д.

    6. Если бы не WP с его условно-законченным видом, то можно компилить на уровне бэкенда сырцы типа Sass, передавая в него данные из базы с помощью сборки (я думаю это можно и под WP накрутить, но я лично не пробовал).

    ЗЫ: Градация от первого до пятого → в порядке абсурдности, чем выше, тем адекватнее. 6 уже особняком идет.
    Ответ написан
    3 комментария
  • Как зафиксировать блок внизу страницы?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Не издеваться над флексами (overflow + фиксированные размеры)
    2. В принципе не загонять себя в такие рамки.
    3. Решение вот.
    Ответ написан
    Комментировать
  • Масштабирование скролла внутри блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Не стоит вешать на body стили, обнуление отступа → максимум. Данный хак— выстрел себе в ногу при бездумном использовании. Тем более overflow:hidden;
    2. Использовать абсолютное\фиксированное позиционирование для красного блока.
    3. Использовать обертку на флексбоксах, которая распределит содержимое тела страницы на красный блок и остальное с flex-grow:[1 или больше] по странице.

    4. Или банально убрать выстрелы себе в ноги таким образом.
    Ответ написан
    Комментировать
  • Как сделать чтобы flex элемент не растягивался?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Вынести «полный список цен» из флекс-обертки.
    2. Задать ссылке justify-self: flex-start.

    ЗЫ: да и в принципе нет смысле использовать flex column для обертки. Выстраиваться один под одним элементы из коробки умеют.
    Ответ написан
  • Вопрос с калькулятором?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    У меня перегруженный пример есть, но с комментариями. Это то, что тебе нужно, я думаю.
    Ответ написан
    2 комментария
  • Как так расположить текст?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Ответ написан
    Комментировать
  • Почему элементы ведут себя так странно?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

    Поэтому решения 2:
    1. Убрать row из оберток, оставив только container*.
    2. Вложить между контентом и row один див с классом col-12*.

    * — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

    Но лучше пойти в документацию и посмотреть примеры, если не можешь в английский. Край → поискать русскоязычную документацию, она обычно отстает, но сетки это из базовых функций.
    Ответ написан
    Комментировать
  • Как выровнять масштаб и положение картинок в блоках для сайта в Photoshop?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Дополню ответ azerphoenix.

    Все иконки стоит обрабатывать вручную, так как:
    1. В верстке они регулируются только по ширине. Да, можно задать условия выравнивания относительно друг-друга или захардкодить размеры, но чем дальше, тем сильнее сердце сжимает от костыльности решений. Базово это ширина. Следовательно, чтобы все они были +- на одной горизонтальной оси — их надо сделать одинаковой высоты и выровнять прямо в ФШ. Верстальщик, если это не ты, спасибо скажет.
    2. Все иконки имеют разный визуальный вес и за счет масштабирования ты, как дизайнер, можешь привести их к единому знаменателю, опять же, вручную.

    3. Их всех стоит загнать в сетку, к примеру на flex-ах, вместо того, чтобы прямо картинки в ряд выстраивать.
    Ответ написан
    1 комментарий
  • Не срабатывает селектор first-child, first-of-type?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    first-of-type + класс + тег дадут необходимый результат.

    По умолчанию они работают с типами и дочерними элементами. first-child → первый из всех, first-of-type первый из типа. Тип != класс, но = тег.

    ЗЫ: но если у тебя класс генерируются автоматически, то:
    1. Ты можешь из бэка передать дополнительный класс для подсветки, скажем, модификатор.
    2. Сделать это на JS.
    Ответ написан
    Комментировать
  • Как в css создать адаптивный список в виде нескольких колонок?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Магии не существует, но ближайший к реализации вариант → columns. Но он не умеет подстраиваться под ширину текста, в отличие от гридов, зато умеет в вертикальное заполнение по колонкам.

    Так что тут одно из двух зол в общем-то. Или ждать еще лет 20, пока в спеке появится что-то подобное.
    Ответ написан
    Комментировать
  • Как обойтись без absolute и fixed?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Элементы с позиционированием relative умеют в z-index.

    Но вообще скорее всего у тебя просто кривая реализация, или некорректный вопрос, поэтому код на codepen.io в студию.
    Ответ написан
    Комментировать
  • Семантика, разметка, наименование. Как выглядит идеальная разметка?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. p — для набора параграфов, если это не он, то можно смело брать span.
    2. Классы на p → идеально, исключением составляет пользовательский ввод.
    3. Класс строго по БЭМ (ну почти).
    4. Флексбоксами действительно не стоит бездумно злоупотреблять, так как всегда есть риск выстрелить себе в ногу.
    5. PP → в макете стоит искать закономерности и их релизовывать, но проверять на переполнение, так как пользовательский ввод не дремлет.
    6. position: absolut;position: absolute;
    7. Отступы всецело зависят от контекста, например если тебе надо сделать карточку с фоноцветом, то скорее всего ты применишь padding, дабы были отступы от краев.
    Ответ написан
    Комментировать
  • Как изменить переменные SCSS c помощью JS?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Можно загонять данные при сборке Gulp-ом. Библиотеку не помню только.
    Но при беглом гуглении нашел вот это.

    В режиме же реального времени прорисовки браузером никак.
    Ответ написан
    1 комментарий
  • Почему браузер некорректно отображает мой адаптивный сайт?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если сайт плохо отображается на разных устройства это не браузеры плохие, это код гавно. Не едиными медиазапросами адаптив реализуется, но и умением выстроить логику в межбрейкпойнтном пространстве, к примеру.

    Я рекомендую более комплексно подойти к получению знаний и навыков верстки + кроссбраузерности.
    Сайт без адаптива последние годы (есть ряд исключений, да), это днище рынка.
    Ответ написан
  • Как отменить прокручивание?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    body → overflow: hidden.
    Ответ написан
    5 комментариев
  • Как сделать отступы от внешних границ ячеек в таблице?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Пустые ячейки, которые сформируют колонку, с выключенными границами + border-collapse.
    Ответ написан
    Комментировать
  • Как реализовать такое?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Нус, скажем, ты можешь взять JS, посчитать количество блоков (n), которые на данном вьюпорте вмещаются в строки и повтыкать баннер в подходящие тебе условия n+1 с параметрами, которые выстроят его на всю ширину.

    С JS ты можешь нагородить проверок, повесить onresize для перерасчета, но легче, пожалуй, будет на CSS набрать, как Макс +- описал.
    Ответ написан
    Комментировать
  • Как можно выровнять столбцы с блоками по высоте?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Присмотрись к https://masonry.desandro.com/. Если сам тебе он не поможет, так хоть сырцы можешь глянуть и под себя логику загнать.

    PS: есть лайфхак с columns, они для другого, поэтому, чтобы их применить придется изрядно повозиться и это скорее костыль.
    Ответ написан
    6 комментариев
  • Сбивается высота в css-grid при 1 fr?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Такое происходит, когда есть 2 и более блоков один за другим, где в одном есть контент, а в других размер эквивалентен в соответствии с правилом 1fr.

    Проверяй все свои правила начиная с этого, есть ли где пустой блок, который принимает размер содержащего контент.
    Ответ написан
  • Как сделать развонемрый фон многострочного текста?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель