Главная » Архив меток: CSS

Архив меток: CSS

Единицы измерения CSS на основе области просмотра

От автора: прошло несколько лет с тех пор, как единицы измерения на основе области просмотра были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз, когда изменяется размер окна браузера. Если вы слышали об этих единицах раньше, но хотите узнать о них подробнее, эта статья может вам помочь. Единицы и ...

Читать далее »

Как задать обратный порядок пользовательских счетчиков CSS

От автора: мне нужен был нумерованный список постов в блоге, чтобы они были перечислены от последнего к первому. Как задать обратный порядок пользовательских счетчиков CSS? Примерно так: 5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title Но приведенное выше — это просто текст. Я хотел сделать это с помощью семантического элемента ol. Простой способ ...

Читать далее »

CSS :is() и :where() уже на пути в браузеры

От автора: новые псевдо-классы CSS :is() и :where() теперь поддерживаются в предварительных версиях Safari (Tech Preview 106) и Firefox (версия 78). Реализация в Chrome остается с флагом. Используйте :is(), чтобы уменьшить количество повторений Вы можете использовать псевдо-класс :is()для удаления повторений в списках селекторов. /* BEFORE */ .embed .save-button:hover, .attachment .save-button:hover { opacity: 1; } /* AFTER */ :is(.embed, .attachment) .save-button:hover ...

Читать далее »

Вот что я не знал о «content»

От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст. Простой пример: .new-item::before { /* "Highlighted item" и элемент содержимого */ content: "icon" / "Highlighted item"; } Я не знал этого, ...

Читать далее »

Руководство пользователя по переменным CSS

От автора: настраиваемые свойства CSS для каскадных переменных, давно запрошенные, но все еще недостаточно используемые, предлагают революционные возможности для совместной работы и повторного использования кода.. Переменные в CSS были крайне востребованной функцией рабочей группы CSS Консорциума World Wide Web, к которой я присоединилась в 2012 году, с самого начала группы в 1997 году. К концу 2000-х годов сообщество разработчиков — ...

Читать далее »

Настройка глобальных стилей и стилей компонентов с помощью переменных CSS

От автора: с тех пор, как я узнала о переменных CSS несколько лет назад, моя самая любимая функция — возможность привязывать переменные к компонентам. Но, честно говоря, я не использовала эту функцию на протяжении многих лет, пока в прошлом году я не создала собственную библиотеку шаблонов для ускорения создания прототипов и работы с клиентами. За последние несколько месяцев я начала ...

Читать далее »

Первый взгляд на aspect-ratio

От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства. Итак, в то время, когда aspect-ratio ...

Читать далее »

Использование calc для определения оптимального значения line-height

От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки. Для начала, пояснительное изображение о том, как высота строки применяется браузером: Как видите, высота строки распределена по разным областям: «Область контента», которая будет равна примерно 1 в высоту. «Область направляющих», то есть оставшееся пространство, распределяемое равномерно сверху ...

Читать далее »

Первые шаги возможной реализации CSS-макета Masonry

От автора: это не самая востребованная функция, но контейнерные запросы дают возможность создавать в CSS макеты «Masonry», которые долгое время были большой проблемой для разработчиков CSS. Masonry — это такая схема, в которой элементы неравномерного размера расположены рваными рядами. Типа обычной кирпичной стены. Сам по себе макет достижим на чистом CSS, но с одной большой оговоркой: элементы расположены не по ...

Читать далее »

Преобразование объекта с фиксированными размерами в адаптивный элемент

От автора: недавно я попал в ситуацию, когда хотел показать iPhone на веб-сайте. Я хотел, чтобы пользователи могли взаимодействовать с демо-версией приложения на этом «фиктивном» телефоне, поэтому он должен был отображаться в CSS, а не изображением. Я нашел отличную библиотеку под названием marvelapp/devices.css. Библиотека реализовала нужное мне устройство с использованием чистого CSS, и они выглядели великолепно, но была проблема: предлагаемые ...

Читать далее »