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

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

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

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

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

Крутые трюки CSS Grid для вашего блога

От автора: я открыла для себя CSS около десяти лет назад, пытаясь изменить внешний вид блога, который я создала. Довольно скоро я смогла кодировать классные вещи с большим количеством математических и, следовательно, более простых для понимания функций, таких как преобразования. Однако другие области CSS, такие как верстка, остаются постоянным источником боли. Этот пост посвящен проблеме, с которой я столкнулась около ...

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

Как использовать grid-template-area для изменения порядка элементов

От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах. Хотя мы могли бы использовать какой-нибудь забавный JavaScript для переупорядочения ...

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

Как задать обратный порядок пользовательских счетчиков 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 в высоту. «Область направляющих», то есть оставшееся пространство, распределяемое равномерно сверху ...

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