Ответы пользователя по тегу CSS
  • Как сделать слежение над файлом SCSS в GULP?

    @Flying
    У вас ошибка в строке 13: вместо app/scss/**/*/.scss должно быть app/scss/**/*.scss, другими словами у вас там слэш лишний.
    Ответ написан
    Комментировать
  • Как можно нормально смотреть стили элемента в браузере, если в них примеси переменных?

    @Flying
    Вам нужно определиться для чего именно вы хотите просматривать стили элемента.

    Если вы хотите видеть какие стили определены (т.е. из каких стилевых таблиц какой стиль приходит, как задан и т.п.) - то это вкладка Styles, она отображает данные из исходных стилевых таблиц.

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

    Судя по всему вы хотите какое-то промежуточное представление (вычисленное, но не совсем), но с точки зрения браузера такого состояния просто нет. Если же генерировать какое-то промежуточное представление - то, уверен, там начнётся масса веселья в случае редактирования.

    За Chrome не скажу, а в Firefox значение переменной показывается при hover'е, в целом удобно.

    Если вы считаете что такая функциональность необходима - вам стоит оформить запрос в виде bug report'а, благо bug tracker'ы для движков основных браузеров открыты (Chromium, Firefox, WebKit). Однако при описании подобного запроса вам стоит постараться лучше продумать предлагаемый вами сценарий реализации.
    Ответ написан
    2 комментария
  • Почему не работает Gulp?

    @Flying
    У вас не установлен или не подключен gulp-sass.

    Более точно можно сказать только видя содержимое Gulpfile.js

    UPD: Причина наверняка в том, что версия gulp-sass ниже 5-й, поскольку синтаксис явного подключения компилятора появился только в 5-й версии. Нужно смотреть в package.json.
    Ответ написан
  • Где и как предложить идею нового свойства CSS?

    @Flying
    Спецификаций CSS занимается рабочая группа в составе W3C. Там же есть и информация о том, как принять участие / предложить свою идею.

    К примеру вы можете создать issue в репозитории рабочей группы.

    Однако вам стоит понимать, что работа над спецификацией уровня CSS Grid - это многолетний труд сотен людей для того, чтобы довести её до реального использования. Если вы предполагаете что за всё это время никто из них не додумался до этой идеи - то вам стоит подумать ещё раз.

    Важно помнить, что в отличие от каких-то конкретный use cases которые были бы интересны для пользователей создатели спецификации сосредоточены на совершенно других вещах. Их цель - создание по возможности полного и непротиворечивого механизма, который при этом будет реалистичным в реализации и использовании.

    За примерами далеко ходить не нужно: parent selector - мечта уже нескольких поколений разработчиков и тема постоянных вопросов. Однако его нет в спецификации (хотя он был в первых драфтах CSS 3 насколько я помню) и скорее всего не будет. Причину, если интересно, попробуйте поискать сами.

    Или, к примеру, такое очевидное, казалось бы, опущение как отсутствие аналога :hover для "stuck" состояния элемента с position: sticky. Ведь его явно не хватает почти любому кто использовал этот стиль. Однако его не будет, о причинах (логичных, но далеко неочевидных) можно почитать в соответствующем issue.

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

    @Flying
    Ответ написан
    Комментировать
  • Один и тот же шрифт смотрится по разному на разных сайтах?

    @Flying
    На одном сайте шрифт грузится с Google Fonts:
    6145de3f57158972120434.png
    а на другом - с Tilda CDN, причём ещё и являясь какой-то модификацией шрифта:
    6145de68bd1c6012910166.png

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

    @Flying
    Не знаю где вы там увидели разницу...

    Вот скриншоты из Browserstack, взял первый попавшийся девайс (Samsung Galaxy S21), открыл сайт в Chrome (слева) и Firefox (справа), сделал скриншоты, специально выровнял по вертикали чтобы проще было сравнивать.

    60ef36f8b3125511944492.jpeg

    Самое заметное - фон немного отличается, с чем это связано - не знаю, но шрифты точно одинакового размера.

    Может у вас в Settings -> Accessibility выключен Automatic font size и выставлено значение, отличное от 100% ? Тогда да, размер будет отличаться, но вы ведь сами его выставили в этом случае.
    Ответ написан
  • Цветные иконки в icomoon.io?

    @Flying
    Всё зависит от того, как именно вы выгружаете иконки из icomoon.

    60c0867f7284f202052220.png

    Как видите - поддерживаются две опции: набор SVG и / или PNG иконок или иконочный шрифт. Очевидно вы выбрали вариант шрифта и в этом случае, естественно, получили одноцветные изображения. Дело в том, что хотя цветные шрифты существуют (сaniuse, пример), но на практике используются крайне редко, icomoon просто не поддерживает такой формат, поскольку выгружает результат в стандартные шрифтовые форматы, а они все бесцветные.

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

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

    @Flying
    Приведённая вами ссылка показывает причину проблемы и направление для её исправления.

    Дело в том, что Rubik является variable шрифтом.

    Подключение шрифта у вас выглядит вот так:
    https://fonts.googleapis.com/css2?family=Rubik&display=swap

    а в стилях используется font-weight: 600. Если вы посмотрите внутрь CSS, загружаемой для подключения шрифта, вы (естественно) увидите там подгрузку шрифта для font-weight: 400, ведь именно это значение соответствует Regular и используется по-умолчанию.

    Таким образом вы ненамеренно создаёте ситуацию, когда вы используете начертание шрифта, которого нет. Очевидно где-то в Firefox (явно в списке зависимостей этого issue) есть проблема рендера variable fonts, причём специфичная для Windows т.к. я проверил (через BrowserStack) на MacOS и там всё нормально.

    Исправление тоже очевидно - вам необходимо корректно подключать шрифты, указывая списки нужных вам начертаний. Для вашего примера это будет:
    https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap

    результат сразу становится корректным:

    60644c49505c3379108506.png
    Ответ написан
    1 комментарий
  • Почему развалился сайт после обновления хрома до 89 версии?

    @Flying
    В общем, поигравшись немного с предоставленным кодом, стало понятно следующее:

    Это явно проблема браузера, так что имеет смысл сообщить о ней разработчикам, написав bug report в их трекер.

    При этом проблема несколько не в том месте где ожидалось: элементы страницы позиционируются правильно, а вот отрисовываются некорректно:

    60521d719ba8e466217077.png

    Здесь видно, что картинка с точки зрения браузера находится в одном месте, а по факту нарисована в другом.

    Но именно это позволяет довольно просто найти дешёвый вариант обхода проблемы, без необходимости менять код. Ведь поскольку проблема связана с некорректной отрисовкой - достаточно просто заставить браузер перерисовать соответствующую область, а для этого, в свою очередь, достаточно заставить его поверить что это нужно сделать.

    Я подготовил пример, демонстрирующий вариант решения. По сути он сводится к добавлению стиля, который производит визуально почти незаметное изменение стилей, которое, однако, заставляет браузер перерисовать всю область:
    .chat-item__content.force-repaint .content-chat-content__message {
        opacity: 0.99;
    }

    Остаётся только "дёрнуть" CSS класс force-repaint на элементе контейнера - и всё сразу встаёт на место, поскольку осуществляется перерисовка. Например вот так:

    function forceRepaintToFixChrome89Issue() {
        if (!navigator.appVersion.match(/\sChrome\/(89|9\d)\./)) {
            // Apply only for Chrome 89 and 90+
            return;
        }
        window.requestAnimationFrame(function () {
            const e = document.querySelector('.chat-item__content');
            if (!e) {
                return;
            }
            const fr = 'force-repaint';
            e.classList.add(fr);
            window.requestAnimationFrame(function () {
                e.classList.remove(fr);
            });
        });
    }


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

    @Flying
    Это происходит в случае, если для отображения текста используется шрифт, не содержащий глифов для символов, использованных в тексте. В этом случае для отображения используется следующий шрифт из списка fallback шрифтов, указанных в стилях для элемента или, если его нет - то шрифт по-умолчанию для соответствующего семейства шрифтов.

    Таким образом вам необходимо проверить какие символы вы грузите в шрифте. Обычно это следствие необдуманного subsetting'а.
    Ответ написан
    1 комментарий
  • Как задействовать CSS в зависимости от значения scrollTop (pageYOffset)?

    @Flying
    Подобная функциональность - идеальный кейс для использования IntersectionObserver. Добавляете observer на элементы, соответствующие вашим экранам, определяете пороговое значение срабатывания - и дальше просто реагируете на события переходов между состояниями.

    Конечно возможны нюансы с тем что, к примеру, несколько (больше двух) ваших страниц попадут во viewport (помним что мониторы можно развернуть и вертикально, получив высоту viewport'а в 2k пикселей), но в целом получается весьма стабильно работающая схема.

    Дополнительный плюс в том что вам не нужно заниматься отслеживанием события scroll т.к. это и сложнее в реализации и менее надёжно и есть связанные с ним проблемы (подробнее в документации)
    Ответ написан
  • Как понять какой именно шрифт отображается?

    @Flying
    Не скажу за Chrome, в Firefox это видно на вкладке Fonts:
    5fb038e1e16b2507425378.png
    Ответ написан
    Комментировать
  • Дергается скролл на на телефоне на комп версии прокрутка нормальная?

    @Flying
    В первую очередь вам необходимо профилировать нагрузку на отрисовку через профайлер, "дёргание" означает просадку по fps, а просадка по fps означает что задачи основного потока выполнения не влезают в 16ms чтобы обеспечить 60fps.

    Если открыть сайт в Firefox, то он сразу указывает на возможную причину: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Perform..."

    Быстрый просмотр показывает что это действительно так - у вас подключен jquery.sticky.js, созданный аж в 2012-м и реализующий то, что сейчас делается через position: sticky или IntersectionObserver путём навешивания обработчика на событие scroll. Это приводит к тому что на каждое движение страницы запускается JavaScript обработчик и создаёт изменения в DOM которые приводят к необходимости пересчёта стилей, а то и layout'а.

    Изменения в DOM - в целом довольно дорогая операция, а уж пересчёт layout'а - тем более, так что логично что на более слабых CPU мобильных устройств это не влезает в бюджет по времени.

    В целом же причина довольно низкой производительности в том что вы пошли по пути наименьшего сопротивления, взяв готовую тему для WordPress. Они обычно сильно перегружены скриптами из-за желания создать их гибкими и универсальными, что, естественно, работает во вред производительности.

    Таким образом начните с замены jquery.sticky.js на нормальное решение, а потом перепроверяйте результат через профайлер и смотрите что ещё вы можете выбросить. Ваша страница визуально явно не требует тех 900кб скриптов что вы на неё грузите.
    Ответ написан
    Комментировать
  • Пропорции блоков на css. Есть ли современное решение?

    @Flying
    Да, есть свойство aspect-ratio которое потихоньку начинает появляться в современных браузерах. Однако, поигравшись с ним немного - могу сказать что пока что использовать его на практике смысла никакого, придётся подождать пару лет как минимум.

    На всякий случай ещё дам ссылку на статью, посвящённую разработке этого свойства.
    Ответ написан
    Комментировать
  • Что за Sass в Foundation CSS?

    @Flying
    С языком Sass лучше всего знакомиться на его официальном сайте, там есть подробная документация.
    Ответ написан
  • Node SASS vs Dart SASS. Какой производительнее при каких условиях?

    @Flying
    1. dart-sass - reference implementation языка т.е. является образцом того как должен работать язык. node-sass binding libsass (реализации спецификации языка на C++) к node.js.

      dart-sass содержит в себе все последние фичи языка, к примеру там уже есть поддержка sass modules, libsass отстаёт, а node-sass отстаёт от libsass. За пруфами - сюда и сюда
    2. libsass производительнее, местами - существенно. К примеру в моих тестах интенсивная работа с sass maps в libsass примерно в 10 раз быстрее чем в dart sass. Насчёт микросекунд - у меня есть проекты которые по 15-20 секунд компилируют только стили на node-sass, на dart-sass всё намного медленнее
    3. Приведённые ссылки - сравнение тёплого с мягким. Есть реализации языков, а есть плагины для их подключения к различным сборщикам. sass - сама реализация языка, gulp-sass - binding для Gulp, sass-loader - binding для Webpack
    Ответ написан
    Комментировать
  • Свойство align-items: center в firefox и в chrome, как пофиксить?

    @Flying
    Это следствие разных алгоритмов обработки суб-пиксельных вычислений т.к. браузерам всё равно в конечном итоге приходится рисовать страницу на экране, состоящем из пикселей. В случае hi dpi экранов, где за один логический пиксель отвечает несколько физических задача решается проще, но для экранов с dppx=1 приходится делать выбор и вот этот выбор делается по-разному.

    На больших контейнерах это незаметно, а для маленьких - да, есть шанс того что элемент будет выглядеть "криво". Какого-то универсального решения здесь, судя по всему, нет, остаётся только подгонять, добавляя отступы в 1px туда или сюда для разных браузеров. Для того чтобы добавить CSS код только для какого-то конкретного браузера можно воспользоваться, к примеру, информацией с browserhacks, хотя, конечно, тут надо быть осмотрительным.
    Ответ написан
    Комментировать
  • Где можно взять CSS стили для prompt Mozilla Firefox?

    @Flying
    Все стили для интерфейса Firefox можно найти в их репозитории, но надо понимать что кода там очень много.

    Также не стоит забывать что скорее всего внешний вид этого окна различается в зависимости от платформы, то что вы приводите - это внешний вид для Windows, но Firefox - кросс-платформенное приложение. Не забывайте также о наличии различных цветовых тем под которые подстраивается UI браузера. В общем задача сложнее чем вам, возможно, кажется.

    Существует такая вещь как system colors, смотрите в их сторону в качестве источника информации о цветах.
    Ответ написан
    Комментировать
  • Что из препроцессоров вы используете?

    @Flying
    Использую по возможности всё что есть в Sass и хотелось бы видеть в нём больше. Активно использую и переменные и миксины и функции и placeholder'ы и list'ы и map'ы и т.п. Многие практические задачи намного легче решаются через препроцессор, те же CSS variables ни разу не замена.

    Конечно для того чтобы код не превратился в кровавое месиво - необходимо соблюдать правила, но это справедливо и для любого другого языка программирования. Да и без использования препроцессоров я видел огромное количество write only css который невозможно нормально поддерживать.

    Вопрос поддерживаемости - он не лежит в плоскости используемого инструмента, а является следствием наличия или отсутствия архитектуры в проекте. Если макеты дизайнера сделаны в стиле "я так вижу", без внутренней логики, если всё это сверстал верстальщик по принципу "что вижу - то и сверстал" - то никакое наличие или отсутствие препроцессора на поддерживаемость кода не повлияет.

    С другой стороны наличие определённой архитектуры и следование ей в проекте даёт возможность относительно безболезненного рефакторинга стилей и оставляет код стилей поддерживаемым и расширяемым. Препроцессоры здесь только на пользу.
    Ответ написан
    Комментировать