• Как поступить с css в многостраничном сайте?

    Kozack
    @Kozack Куратор тега CSS
    Thinking about a11y
    В идеальном мире все стили у вас разбиты по группам:
    Общие стили -- которые применяются на всех или на связанных страницах сайта. (Макет, какая-то шапка, подвал)
    Специфичные -- которые применяются на одной или нескольких конкретных страницах. (Таблица цен на одной странице, или другой макет для админки)

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

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

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

    На пример: Форма. Общие стили формы -- критичный CSS. А стили для отображения условного попапа с подтверждением отправки -- не критичный. В результате, браузер скачивает критичный CSS, отображает страницу, пользователь уже может с ней работать и заполнять форму, а браузер в фоне дозагружает остальной CSS для попапа.

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

    Или другой пример. Предположим, что на вашем сайте все страницы достаточно уникальны. В таком случае, разделять "общие" и "специфичные" стили может быть лишним или слишком затратным для поддержки.
    Ответ написан
    5 комментариев
  • Почему pos:absolute создает скрол?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    независимо от типа position элементы, которые будут выходить за правую и нижнюю границу - будут создавать скролл.
    оборачивай внешний элемент в блок с overflow: hidden например
    Ответ написан
    Комментировать
  • Как красиво сверстать такое поведение блоков?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Современный способ - на гридах с помощью grid-teamplate-areas.
    https://habr.com/ru/post/500580/

    Нужно задать всем участвующим элементам
    grid-area, например, title для заголовка, text для текста и img для картинки
    а родительскому блоку указать, например grid-teamplate-areas: 'title title' 'text img' для одного разрешения и
    grid-teamplate-areas: 'title img' 'text text' для другого.
    Ответ написан
    2 комментария
  • Как сделать фоновое изображение для текста?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    с помощью -webkit-background-clip: text;

    Но не очень широкая поддержка.

    Либо с помощью свг:
    css.yoksel.ru/svg-masks
    https://habr.com/ru/post/349362/
    Ответ написан
    Комментировать
  • Overflow:hidden как лучше сверстать?

    LenovoId
    @LenovoId
    svg, css,js
    width height top left поправите сами

    Ответ написан
    Комментировать