Задать вопрос
Ответы пользователя по тегу CSS
  • Как применить rel=preload к адресу внутри CSS файла?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Font-face — правило.
    Link preload — запрос на предзагрузку ресурса для правила.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Изучайтессс... Ресурс рекомендую изучить вдоль и поперек, а еще и желательно понять, что именно изучил.

    Лечится display:block\inline-block\flex\inline-flex и т.д.
    Ответ написан
    Комментировать
  • Как избавится от сотен товарных карточек в html коде?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

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

    В php это выглядело бы как-то так:
    ...
    foreach (&items as $item) { ?>
    [HTML-тело карточки товара со вставленными параметрами вида $item->title]

    Могут быть как прямые выводы на ЯП, так и с помощью шаблонизатора.

    Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.
    Ответ написан
    Комментировать
  • Когда стоит применять em вместо rem?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Верстка на rem-ах производится с вычислением от корня документа, т.е. body, html, а em от родителя. Притом если у родителя нет изменения в размере font-size, то поиск изменения будет подниматься вверх вплоть до корня.

    Пример тут.

    PS: такой подход позволяет на десктопа указать в html, body{ font-size: 20px, а для таблеток и мобильных html, body{ font-size: 16px и верстка будет пересчитана сама.
    Ответ написан
    7 комментариев
  • Есть ли более простой способ назначить стиль незагруженным изображениям?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Тебе стоит копнуть в обсерверы типа такого и такого. Либо пойти по пути наименьшего сопротивления и заюзать bind в либе jQuery, который умеет ловить события на элементах, которые досоздаются после загрузки DOM. Но это неточно, я несколько лет, как не имел дело с jQuery.
    Ответ написан
    Комментировать
  • Как сделать форму выбора(марка автомобиля,модель итд) как на сайте drom.ru(описание внутри)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
    2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
    3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Речь же о графическом редакторе, эдаком визивиге для заданного набора параметров. С ними все просто, рисуются с помощью JS и в нормальном подходе к разработке параметры, которые ты задаешь во всплывающих формах (дизайн не важен, речь о сути элемента интерфейса) сохраняется в объекте, к примеру:
    {
        block: {
            borderColor: 'red',
            borderWidth: '15'
    ....


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

    Есть подобные редакторы и на WP, например в Unyson-е: принцип тот же, оформление попроще, блоками.

    Таких редакторов много, у этого, к примеру, можно сразу посмотреть сконфигурированный объект.

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Крайне кривая верстка и нежизнеспособная. В ее рамках можно сделать так.
    Ответ написан
    Комментировать
  • Изменить background для label у input type="radio"?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    label должен находится после input-а, тогда конструкция селекторов: input:checked + label позволит такое совершить. Либо завернуть текст в span и по то же конструкции, но вместо label обращаться к input:checked + span.

    Либо по клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубо, так:
    if (element.checked) {
        parent.classList.remove('classname')
    } else {
        parent.classList.add('classname')
    }
    Ответ написан
    2 комментария
  • Как зафиксировать страницу, чтобы не съезжала при увеличении?

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

    А я дополню: никто в здравом уме не зумит сайт, для отладки используется дебаггер (f12). А для управления адаптивом включают эмуляцию устройств (там же в дебаггере).
    Ответ написан
    Комментировать
  • Почему когда я делаю margin появляется белое пространство?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

    Лекарство:
    1. overflow:hidden;
    2. Флексбоксы.
    Ответ написан
    Комментировать
  • Как сверстать блок с картинкой со срезанными углами, чтобы снизу был фон изображением?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Максим Ленский продемонстировал ответ на вопрос. Маску для картинки: она встраивается в документ и применяется по необходимости.

    А для того, чтобы не при использовании разных картинок углы скашивались всегда одинаково, необходимо дописать скрипт, который будет генерировать этот path маски на базе условий, умноженных на соотношение размеров изображения.
    Ответ написан
    Комментировать
  • Как поместить img на угол блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Абсолютное позиционирование.
    .border {
      position: relative;
    }
    .brushes {
      position: absolute;
      left: 100%;
      top: 100%;
      transform: translate(-50%,-50%); 
    }


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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Вообще-то на CSS можно без проблем такое сделать. По пути наименьшего сопротивления → на гридах с параметром 1fr для шаблона по высоте. На флексбоксах тоже такое можно муткануть, но не так приятно, как на гридах.

    А на JS надо брать размер элемента, можно сразу три, чтобы сравнивать и брать больший, а затем присваивать его всем в качестве min-height (иначе при перерасчетах он будет всегда фикс высоту выдавать).

    Желательно это все завернуть в функцию, которую вызвать при инициации скрипта И запустить в вотчере события изменения размера окна.
    Ответ написан
    3 комментария
  • Как сделать подсветку одного якоря?

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

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. Задать отступ для размещения тени.
    2. Использовать отрицательный отступ на те же значения, чтобы не уехала сетка.
    Ответ написан
  • Как сделать автоматическое удаление лишних отступов?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    1. На выводе почти любой тег порежет лишние пробелы, исключеним будет <pre> к примеру.
    2. А на вводе c JS (да и не только), такой вопрос уже был.
    Ответ написан
    1 комментарий
  • Почему не рендерится body в IE11?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Проблема с закрытием тегов, на скрине видно, что сразу после </head> происходит закрытие </html>. Если многие браузеры могут такое простить и отобразить, как надо, то IE в их число не входит.

    PS: я вот сам столкнулся с подобным, но уже в конкретной ситуации, которую могу описать. Есть проект с частичной интеграцией Vue. И вот такое происходит, когда в props, в который должно что-либо придти не приходит. Выкашивает весь код.
    Ответ написан
  • Как реализовать на сайте динамический 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 комментария