Несколько неочевидных frontend-хитростей / Блог компании Wargaming / Хабр

Оформление декоративной линии текста (text-decoration-style, text-decoration-color)

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

 .multiple {
  text-decoration: underline overline;
}

.color {
  text-decoration-color: blue;
}

.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Плавная прокрутка страницы на CSS (scroll-behaviour)

 body {
  scroll-behavior: smooth;
}

• smooth — плавная прокрутка;
• instant — мгновенная прокрутка;
• auto — на усмотрение браузера.

Если плавная прокрутка страницы на вашем сайте не является чем-то критичным, смело используйте это свойство. Вы получите плавный скролл при переходе по якорям с помощью всего одного CSS-правила как минимум, в Firefox .
Пример

Анимация появления элемента (быстро и легко)

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation. По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элементу класса с анимацией или самого элемента). Поэтому, важно не хранить незаполненные блоки в DOM, а добавлять их динамически в контейнеры по мере загрузки.

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
  animation: fade-in .4s ease;
}

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Изучить рабочий пример можно здесь.

Разрыв строки на CSS

.break:after {
    content: '<br />';
}

.break:after {
    content: '\A'; //код переноса строки
    white-space: pre; //заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}

SVG с интерактивными элементами

Но! У нас есть неплохая альтернатива — прописывать все стили взаимодействия прямо в SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            rect {
                fill: blue;
            }
            rect:hover {
                fill: orange;
            }
        </style>
    </defs>

    <rect />
    <rect />
    <rect />
    <rect />
</svg>

<iframe src="icon.svg"></iframe>

<object type="image/svg+xml" data="icon.svg"></object>

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

UPD. Пользователь Large поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <style type="text/css">
            @keyframes fill-change {
                0% {
                    fill: blue;
                }
                50% {
                    fill: orange;
                }
                100% {
                    fill: blue;
                }
            }
        
            rect {
                animation: 2s ease fill-change infinite;
                fill: blue;
            }
        </style>
    </defs>
    
    <rect />
    <rect />
    <rect />
    <rect />
    <path />
</svg>

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике. До новых встреч!

Стилизация полосы прокрутки CSS с помощью JavaScript и не только: примеры решений

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов использования набора свойств с префиксом :: webkit.

К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров.

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров.Также неплохо абстрагироваться с помощью Sass @ mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет полосой прокрутки-желоба, и Джефф описал его здесь. Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки, то вам вероятно придется искать решение JavaScript. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Вот еще одна простая полоса прокрутки:

Дас Шурма написал очень интересное руководство, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript .

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

Я вставлю экземпляр здесь:

Автор: Крис Койер

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD в HTML

Практика верстки сайта на CSS Grid с нуля

Как использовать CSS Scroll Snap?

Scroll Snap позволяет настраивать скроллинг страницы с помощью CSS и без JavaScript. Сегодня я покажу, как использовать технологию.

Scroll Snap реализует красивую прокрутку без необходимости использования JavaScript-библиотек. Данная технология привязывает скроллинг, блокируя область просмотра для каждой прокрутки в данной точке, которую вы указываете.

CSS Scroll Snap использует два основных свойства: scroll-snap-type и scroll-snap-align.Что нужно знать о них:

• Свойство scroll-snap-type, имеется знать к родительскому контейнеру. Оно принимает два аргумента: направление привязки и поведение привязки.

 .container {
 тип щелчка: [x | y | блок | встроенный | оба] [обязательный | близость];
} 

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

• Свойство scroll-snap-align к дочерним элементам контейнера.

В нем вы указываете привязки для оси x и оси y:

 .children {
 scroll-snap-align: [нет | начало | конец | центр] {1,2};
} 

. Но ни одно из этих свойств не будет работать, если указать свойство overflow для контейнера и не установить для него фиксированную высоту. При этом нельзя использовать обязательный, если содержимое внутри одного из дочерних элементов длиннее, чем родительский контейнер.Иначе пользователь просто не сможет увидеть контент.

Есть еще два свойства, с которым нужно использовать:

1. заполнение прокрутки (имеющееся к родительскому контейнеру) — это свойство похоже на свойство заполнения и действует как смещение. Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right.
2. scroll-margin (используется к дочернемунимм контейнера) похоже на маржу и элемент для установки начального значения.Также есть свойства scroll-padding-top, scroll-padding-bottom, scroll-padding-left и scroll-padding-right.

Чтобы узнать больше обо всех свойствах CSS Scroll Snap, ознакомьтесь с документацией Mozilla.

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

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

 <стиль>
.container {
    ширина: 60вв;
    высота: 70vh;
    наценка: авто 15вх;
    переполнение-x: прокрутка;
    scroll-snap-type: x обязательный;
    цвет белый;
    цвет фона: oldlace;
    дисплей: гибкий;
    align-items: center;
}

.child {
    маржа слева: 0,5 бэр;
    высота: 90%;
    прокрутка-привязка-выравнивание: начало;
    набивка: 1 бэр;
    дисплей: гибкий;
    align-items: center;
    justify-content: center;
    выравнивание текста: центр;
}

.child: nth-child (1n) {
    цвет фона: темнокожий;
    гибкость: 0 0 80%;
}

.child: nth-child (2n) {
    цвет фона: индиго;
    гибкость: 0 0 60%;
}

.child: nth-child (3n) {
    цвет фона: темно-синий;
    гибкость: 0 0 40%;
}

.child: nth-child (4n) {
    цвет фона: бледно-зеленый;
    гибкость: 0 0 50%;
}

.child: nth-child (5n) {
    цвет фона: желтый;
    гибкость: 0 0 80%;
}

.child: nth-child (6n) {
    цвет фона: оранжевый;
    гибкость: 0 0 60%;
}

.child: nth-child (7n) {
    цвет фона: помидор;
    гибкость: 0 0 80%;
}
 

Scroll Snap хорошо поддерживается во всех современных браузерах.

Единственная проблема — это Internet Explorer, который требует более старой версии спецификаций. Их можно найти здесь.

Также я бы посоветовала использовать для контейнера свойство -webkit-overflow-scrolling: touch, чтобы добавить поддержку iOS-устройств.

CSS Scroll Snap помогла мне сэкономить часы работы. Попробуйте реализовать подобное решение с помощью JavaScript. Тогда вы поймете, что именно я имею в виду.

Данная публикация представляет собой перевод статьи «Как использовать CSS Scroll Snap», подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

.

Несколько неочевидных веб-интерфейсов / Блог компании Wargaming / Хабр

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

Оформление декоративной линии текста ( text-decoration-style , text-decoration-color )

В Firefox и Safari уже появились дополнительные возможности для декоративной линии, которая добавлена ​​к тексту с свойствами text-decoration .

К примеру, можно задавать свойству text-decoration сразу несколько значений (причем это работает уже очень давно):

  .multiple {
  оформление текста: подчеркивание поверх текста;
}
  

Можно задавать цвет для оформления текста:

  .color {
  цвет оформления текста: синий;
}
  

А также стиль линии:

  .dashed {
  стиль оформления текста: пунктирная;
}
.пунктирный {
  стиль оформления текста: пунктирная;
}
.волнистый {
  стиль оформления текста: волнистый;
}
  

Учтите, что в данный момент работают новые свойства только в Firefox и частично в Safari . Посмотреть рабочий пример можно здесь

Плавная прокрутка страницы на CSS ( scroll-behavior )

Малоподдерживаемое, но очень полезное свойство scroll-behavior позволит нам одной строки сделать скролл на странице плавным. Работает как при прокрутке в нужное место при переходе по якорям, так и при прокрутке страницы JS-ом.

  кузов {
  поведение прокрутки: плавное;
}
  

Свойство может принимать 3 основных значения:

• smooth — плавная прокрутка;
• Instant — мгновенная прокрутка;
• авто — на усмотрение.

Когда нибудь (надеюсь, совсем скоро) нам не придется больше писать для плавной прокрутки на JS или подключать сторонние библиотеки.

. Плавная прокрутка на вашем сайте.Вы получите плавный скролл при переходе по якорям с помощью всего одного правила CSS как минимум в Firefox .
Пример

Анимация появления элемента (быстро и легко)

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

Как это часто делали раньше:
1) на сервер посылаетcя запрос;
2) после ввода данных добавляются в скрытый на странице блок;
3) блоку присваивается класс, в котором прописана анимация его появление (либо (о, ужас!) Блок анимируется JS-ом).

Так вот, последний пункт можно считать избыточным, ведь у нас есть старое доброе CSS-свойство animation . По умолчанию анимация срабатывает при загрузке страницы либо при изменении DOM-дерева (а именно при добавлении элемента класса с анимацией или самого элемента). Поэтому важно не хранить незаполненные блоки в DOM, а также их динамически в контейнеры по мере загрузки.

  @keyframes fade-in {
    0% {
        непрозрачность: 0;
    }
    100% {
        непрозрачность: 1;
    }
}

.content {
  анимация: легкость нарастания .4s;
}
  

Вот и все, что нужно для создания простых анимации появления. Плюсы такого подхода очевидны:

• Прописав @keyframes один раз, можно использовать их в любом месте CSS для добавления типовой анимации всем нужным элементам;
• Обращения к DOM в JS будут сведены к минимуму, что при большом количестве элементов или итераций поможет снизить нагрузку на страницу.

Минус у данного подхода только один: новые элементы не могут храниться в DOM и ждать, пока мы наполним их контентом.Их разметку придется хранить на стороне JS…

Изучить рабочий пример можно здесь.

Разрыв строки на КСС

Если в определенном месте на странице вам нужно добавить перевод строки, а в HTML лезть не требуется (или невозможно), на помощь придет CSS. Первое, что приходит в голову — добавить псевдоэлемент с тегом внутри:

  .break: after {
    содержание: '
';
}
  

К сожалению (а может, и к счастью), теги теги в псевдоэлементы, нельзя.Но выход есть!

  .break: после {
    содержание: '\ A'; // код переноса строки
    белое пространство: предварительно; // заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}
  

Маленький пример.

SVG с интерактивными элементами

Если вам когда-нибудь приходилось оформлять взаимодействие с элементами SVG, вы знаете, что сделать это не так-то просто. Чтобы обратиться в CSS к использованию SVG-элементов, добавьте на страницу не тег , а код всего SVG-изображения целиком.Это делает HTML-код ужасно громоздким. В результате нам приходится жертвовать размером страницы и лаконичностью кода ради визуальных эффектов.

Но! У нас есть неплохая альтернатива — прописывать все стили игры прямо в SVG:

Казалось бы, если мы прописали стили в изображении, они должны отрабатывать при добавлении SVG как обычного ! Однако, не все так просто.Добавлены таким образом стили все равно работать не будут. Но мы можем сделать ход конем и добавить SVG на страницу с помощью или

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

UPD. Пользователь Большой поделился классным решением, которое подробно описано здесь.
Еше одно интересное решение от пользователя exeto.

Кстати, при желании в SVG-файл можно добавить и CSS анимацию:

Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике.До новых встреч!

.

переполнение | htmlbook.ru

Internet Explorer		Хром	Opera	Safari	Firefox		Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	3,6	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	видимый
Наследуется	Нет
Применяется	К блочным элементом
Процентная запись	Неприменима
Ссылка на спецификацию	http: // www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

КСС 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

переполнение: авто | скрытый | свиток | видимый | унаследовать

Значения

видимый

Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

скрыто

Отображается только область внутри элемента, остальное будет скрыто.

свиток

Всегда добавляются полосы прокрутки.

авто

Полосы прокрутки добавляются только при необходимости.

наследовать

Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

  

 
  
  
  <стиль>
   .layer {
    переполнение: прокрутка; / * Добавляем полосы прокрутки * /
    ширина: 300 пикселей; / * Ширина блока * /
    высота: 150 пикселей; / * Высота блока * /
    отступ: 5 пикселей; / * Поля вокруг текста * /
    граница: сплошная черная 1px; / * Параметры рамки * /
   }
  
 
 
   

    
 Duis te feugifacilisi 
 
   
 Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut wisis enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit
    лобортис нисл ут аликвип экс еа коммодо конскват. 
  
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

[окно.] Document.getElementById («elementID»). Style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

• не поддерживает значение inherit;
• относительно позиционированные дочерние элементы, значения переполнения у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

• Сочетание переполнения со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
• Для блока, у указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
• Высота блока с горизонтальной полосой прокрутки увеличивает на высоту скролбара, хотя по указанным CSS заданные размеры входят в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (,,). .

No related posts.