scroll-behavior в CSS в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53407b75d8104e94 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Что такое свойство scroll-behavior css?

Недавно я заметил свойство scroll-behavior , которое я могу указать в моем css. Он может принимать только 2 свойства: inherit и initial . Я никогда не слышал/не видел его раньше, поэтому я попытался посмотреть на него. Проблема в том, что все ссылки собираются объяснить разные вещи о свойстве overflow .

Проблема в том, что я не вижу разницы. Итак, что он делает?

Заметил, что он появился и в моем Chrome Inspector, что привело меня к этому сообщению.

Что такое поведение прокрутки?

В частности, это свойство CSSOM-View ‘Scroll-Behavior’, свойство css было создано для интеграции большей гибкости CSS для прокрутки элементов DOM. Большинство параметров «прокрутки», которые создаются для веб-сайтов, обычно построены на JS-библиотеке или плагине. Как упоминалось выше, вот релиз — http://dev.w3.org/csswg/cssom-view/#scrolling

Текущее принятое поведение прокрутки DOM устанавливается с помощью меток привязки (пример: Click Me). Когда это свойство CSS полностью внедрено во всех браузерах и правильно реализовано (ознакомьтесь с этим обсуждением: https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig). Вы сможете переключить «мгновенный» ярлык тега привязки на более «гладкую» прокрутку.

Реальный вопрос заключается в том, когда мы это свойство будем доступны в пограничных браузерах? В настоящее время он признан Firefox и Chrome, но свойство не является «активным», поскольку исследование прошло.

Введение в CSS Scroll Snap Points

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

Новая спецификация CSS Scroll Snap Points поможет решить эту проблему, используя для обработки такого поведения всего несколько строк CSS .

Эта спецификация с течением времени претерпела изменения. Появились « старые » и « новые » свойства и значения. И хотя нам обещают, что более полная поддержка будет реализована уже в самом скором времени, в этой статье я научу вас, как обеспечить максимальную поддержку scrolling CSS уже на переходной стадии.

Демо-версия полифилла

Приведенная ниже демо-версия имеет горизонтальную прокрутку. Весь элемент является адаптивным: каждая « панель » принимает ширину и высоту окна просмотра ( благодаря единицам измерения vh и vw ).

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

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

Если вы просматриваете демо в Chrome или Opera: Эти браузеры вообще не поддерживают CSS scroll модуль Scroll Snap , поэтому поведение, которое вы будете наблюдать в них, полностью задается полифиллом.

Если вы просматриваете демо в Edge или IE: Пример не будет работать вообще. Эти браузеры имеют частичную поддержку данного модуля, но не достаточную, чтобы обеспечить корректную работу Scroll Snap .

Если вы просматриваете демо на мобильном устройстве: iOS 9 поддерживает функцию ( протестировано на iPhone 6 ), но я замечал, что в самом начале демо-версия работает довольно странно. Chrome / Android не поддерживают функцию, но с помощью полифилла демо-версию удается реализовать полностью ( протестировано на Android Nexus 6 ).

Вот код, который приводит в действие всю магию:

Давайте разберем эти свойства одно за другим.

Свойства CSS Scroll Snap

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

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

Чаще всего в браузерах поддерживается значение mandatory , так как оно определяет более последовательное поведение div scroll CSS .

scroll-snap-align


Это свойство определяет, как отступ элемента скроллинга, выравнивается относительно родительского контейнера. Оно использует два значения — х и y . Если вы устанавливаете только одно значение, то оно будет рассматриваться как сокращенный синтаксис и автоматически присваиваться для всех параметров. Например, отступ padding: 10px равносилен padding : 10px 10px 10px 10px. Это свойство не может анимироваться.

scroll-snap-padding

Это свойство относится к контейнеру прокрутки окна просмотра. Оно работает так же, как обычный отступ с той же последовательностью присвоения значений. Например, scroll-snap-padding: 75px 0 0; задает верхний отступ 75 пикселей и все остальные по 0 пикселей. Это свойство поддерживает анимацию.

Старые свойства прокрутки CSS

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

scroll-snap-points

scroll-snap-point относится к оси, которая задает направление прокрутки ( CSS scroll x ). В первом приведенном примере мы видели, что это свойство задавалось для оси х . В приведенном ниже примере оно установлено для оси у ( так как здесь мы имеем вертикальную прокрутку ) с помощью правила scroll-snap-points-y : repeat ( 100% );. Проценты задаются отступу элемента, который определен в качестве контейнера прокрутки.

scroll-snap-destination

Это свойство и scroll-snap-coordinate очень похожи в том, что касается принимаемых значений. Только scroll-snap-destination относится к родительскому элементу, а scroll-snap-coordinate — к самому элементу. Достаточно указать только scroll-snap-destination , если точка скроллинга задается на основе самого элемента, а не контейнера, который его содержит.

Это свойство позволяет определить, в какой момент при scrolling CSS элемента должно происходить переключение на другую точку. Например, если вы хотите, чтобы при скроллинге на 100 пикселей прокручиваемый контент переключался и перемещался до следующей точки. На приведенной ниже диаграмме показано, как с помощью этого свойства можно настроить данный параметр:

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

scroll-snap-coordinate

Это свойство позволяет указать, где в самом элементе устанавливается точка переключения CSS background scroll . Значение позиции связано со стороной элемента. scroll-snap-coordinate — это единственное свойство, которое может применяться ко всем элементам на странице. Все остальные свойства скроллинга применяются только к контейнеру прокрутки:

Свойства, scroll-snap-destination и scroll-snap-coordinate могут быть анимированы, в то время как scroll-snap-type и scroll-snap-points — нет.

Дополнительные ресурсы

Рабочий проект для CSS Scroll Snap Points Module Level 1
Материалы по MDN
Статья в блоге WebKit
Коллекция на CodePen

Заключение

С момента написания этой статьи спецификация снова была обновлена и все еще продолжает изменяться. Повсеместная поддержка этого модуля пока еще не реализована, но даже если вам нужно учитывать устаревшие значения, для которых необходимо использовать полифилл, то код, с помощью которого она реализуется, все равно очень компактный. Я до сих пор не определилась относительно того, использовать ли подобные инструменты CSS scroll в своих проектах. Это зависит от того, насколько вы готовы перерабатывать код по мере того, как ситуация в будущем будет меняться. В то же время, не могу не отметить, что полифилл работает очень хорошо, всегда приятно видеть подобные вещи в CSS .

Илон Маск рекомендует:  Что такое код asp accessssl

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

Свойства CSS overflow (h > Игорь • Обновление:Декабрь 5, 2015 • Оставить комментарий

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня мы продолжаем тему каскадных таблиц стилей и в очередном уроке из «Учебника» рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.

На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.

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

Overflow (visible, h >

Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума W3C (данные представлены по версии CSS2.1, хотя они действительны и поддерживаются в более новой версии CSS3):

Как видите, оверфлоу имеет 4 основных параметра (visible, hidden, auto, scroll) и значение inherit, которое можно прописать при желании присвоить дочерним элементам свойство родителя, однако по умолчанию это правило не наследуется (inherited: no на скриншоте). Дефолтным же значением является висибл (initial: visible).

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

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

Возьмем для примера контейнер DIV (в этой статье подробнее о дивах как основе блочной верстки), подкрасим его с помощью background, подключив стили через атрибут style, и поместим внутрь произвольный текст:

Итоговый результат будет примерно таким:

У нас не определена ширина (width) контейнера. В этом случае, если вы помните, блочный элемент занимает все доступное ему место по ширине. А вот высота (height) блока, ежели она не указана, определяется именно содержанием (в нашем примере присутствующим там текстом).

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

А теперь попробуем к CSS стилям для дива из нашего примера добавить фиксированную ширину, скажем, 250px:

В результате произойдут следующие изменения с нашим контейнером:

В общем, все получилось в соответствии со сказанным выше: при указании фиксированной ширины блочного элемента содержание (текст) будет автоматически растягивать высоту контейнера. Далее укажем определенную высоту испытуемого блока, допустим, 40px:


В этом случае в условиях ограниченного пространства тому же самому объему контента деваться некуда и он вылезет за границу DIV по высоте:

Действует правило по умолчанию overflow visible (хотя оно и не прописано), в соответствии с которым содержимое, вылезающее за границы контейнера, отображается в браузере. Если теперь к стилям CSS элемента добавить overflow:hidden, то часть текста, не умещающегося в блоке, будет скрыто:

Правило оверфлоу для блоков, содержащих контент, который невозможно распределить по высоте

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

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

Обратите внимание, что теперь содержимое при ограничении ширины сразу превысило границы по горизонтали. И если пропишем overflow hidden, то тем самым обрежем контент:

Добавление прокрутки с помощью параметров scroll и auto правила overflow

Теперь разберем тот случай, если ширина и высота контейнера фиксированные, но не умещающийся в нем контент желательно оставить доступным. Возьмем тот же пример c фиксированными шириной и высотой, только значение height для наглядности укажем в 60px, добавив overflow:scroll к CSS стилям:

В результате по вертикали и горизонтали появились полосы прокрутки (scrollbars):

Таким образом, контент становится доступным, пусть и с помощью скроллинга. Однако, обратите внимание, что сформировалась не только вертикальная прокрутка, которая нужна для полного просмотра, но и горизонтальная, которая не является активной. Это особенность именно значения scroll.

Если же вы хотите, чтобы прокрутка появлялась только в случае необходимости, то имеет смысл применить параметр overflow:auto, который инициирует создание полос прокрутки только в том случае, если они действительно нужны (подробности посмотрите на этой вебстранице):

Хочу отметить, что у основного правила стилей есть вариации в виде overflow-x и overflow-y, которые принимают те же значения (visible, hidden, scroll, auto), что и базовый оверфлоу, только заданные параметры применяются к содержимому блоков по горизонтали (x) и по вертикали (y).

Правило CSS text-overflow (clip, ellipsis)

А теперь познакомимся с модификацией выше описанного свойства оверфлоу, которое появилось только в CSS3. О нем можно получить информацию на соответствующей официальной странице (редакторский черновик консорциума W3C):

Свойство text-overflow имеет 2 основных значения (clip и ellipsis). Оно действует только в том случае, если указан overflow, значение которого отлично от visible. А это, как вы помните, параметр по умолчанию, поэтому в стилях для соответствующего элемента должен обязательно присутствовать оверфлоу с hidden, scroll или auto.

Clip является дефолтным значением и просто обрезает текст. Поэтому задействуем text-overflow для нашего DIV с соответствующими CSS свойствами, добавив white-space:nowrap (для запрета переноса слов):

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

Теперь текст будет обрезан, но ежели вы наведете на него курсор мышки, то он будет появляться в полном объеме. Можете в этом убедиться, перейдя по предоставленной ссылке.

CSS Smooth Scroll Behavior

I recently wanted to add a smooth scroll effect on one of my websites and went searching for a JavaScript plugin to achieve it. To my surprise a newer CSS Scroll Behavior API is available in many browsers! With the CSS Scroll Behavior API we can link to inner parts of a HTML page and have the browser scroll to the part of the page instead of immediately jumping to it. I thought this was pretty cool so I wanted to write up a little demo of how it works.

In the past if we wanted to have a smooth scroll to a certain part of the page we would have to use JavaScript to accomplish this. Now with CSS Scroll Behavior we can do it with just a single line of CSS. Using a link I can link to inner parts of my HTML page.

With this little bit of HTML the user can click the link and have the page jump to the some-content paragraph below. This jumping effect can be a helpful shortcut but also jarring to suddenly move to a completely different part of the page. To make this a better experience we can add the following CSS:

Now when we click the link, the browser will scroll to the content and not immediately jump to that part of the page. Because the smooth scroll behavior is applied via CSS we can manipulate the scroll position with JavaScript and still get the same nice smooth scroll effect.

The browser support for CSS Scroll Behavior is pretty good, as it works in the next version of Edge, Chrome and Firefox. You can try it here, jump back to the top. You can also checkout the a full working demo in the link below!

Web Component Essentials

Build reusable UI components with my new Course & E-Book!

Web Component Essentials

Learn to write reusable UI components that work everywhere!

Современный сброс CSS

Дата публикации: 2020-10-30

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

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

Сброс чувственных установок по умолчанию

Но мне по прежнему нравится сбрасывать вещи, поэтому в течение многих лет я медленно, но уверенно переделывал сам себя в манере кодового гольфа. Я объясню все по порядку, но прежде, чем я это сделаю, вот код полностью:

Илон Маск рекомендует:  Объявление всех переменных, переданных в параметрах и в cookie на PHP

CSS Overscroll Behavior Module Level 1


Editor’s Draft, 31 August 2020

Abstract

This module defines overscroll-behavior to control the behavior when the scroll position of a scroll container reaches the edge of the scrollport. This allows content authors to hint that the boundary default actions, such as scroll chaining and overscroll, should not be triggered.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-overscroll” in the title, preferably like this: “[css-overscroll] …summary of comment…”. All issues and comments are archived, and there is also a historical archive.

This document was produced by the CSS Working Group.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 March 2020 W3C Process Document.

1. Introduction

This section is not normative.

A content author does not necessarily want scroll chaining to occur for all scroll containers. Some scroll containers may be part of a containing block chain but may serve a different logical purpose in the document and may want to prevent scrolling from continuing up the scroll chain. To achieve this, a content author will install event listeners without the passive flag set and will use preventDefault when there is a risk that scroll chaining will occur. This is detrimental for the following reasons:

The user agent may in the future introduce new input methods for scrolling that are not supported by the content author’s event listeners.

A non passive event listener will delay scrolling because the user agent will have to wait for the result of the event listener to determine if preventDefault was called causing increased scroll latency.

When scrolling is performed near the edge of the scroll boundary, the default action may cause both scrolling to the edge of the scroll container and a boundary default action. Calling preventDefault will not only cancel the boundary default action but also the scroll to the edge of the scrollport.

The default action for the event may also prov >default actions such as scroll chaining.

Thus, it is not possible for a content author to control scroll chaining and overscroll in a robust, performant and forward compatible way. The overscroll-behavior property fixes this shortcoming.

2. Motivating Examples

In this case, the author can use contain on the sidebar to prevent scrolling from being chained to the parent document element.

In this case, the author can use contain on the viewport defining element to prevent overscroll from triggering navigation actions.

In this case the the author can use none on the infinite scroller to prevent both scroll chaining and overscroll affordance.

3. Scroll chaining and boundary default actions

Operating Systems have rules for scrolling such as scroll chaining and overscroll affordances. This specification does not mandate if and how scroll chaining or overscroll affordances be implemented. This specification only allows the content author to disable them if any are implemented.

is when scrolling is propagated from one scroll container to an ancestor scroll container following the scroll chain. Typically scroll chaining is performed starting at the event target recursing up the containing block chain. When a scroll container in this chain receives a scroll event or gesture it may act on it and/or pass it up the chain. Chaining typically occurs when the scrollport has reached its boundary.

A is the order in which scrolling is propagated from one scroll container to another. The viewport participates in scroll chaining as the document’s scrollingElement, both regarding placement in the scroll chain as well as adhering to the chaining rules applied to it.

refers to when the scroll position of a scroll container reaches the edge of the scrollport. If a scroll container has no potential to scroll, because it does not overflow in the direction of the scroll, the element is always considered to be at the scroll boundary.

refers to the user-agent-defined default action performed when scrolling against the edge of the scrollport. A is a boundary default action which is performed on the scroll container without interacting with the page, for example displaying a overscroll UI affordance. Conversely, a interacts with the page, for example scroll chaining or a navigation action.

4. Overscroll Behavior Properties

The controls the permitted boundary default action for a scroll container element when its scrollport reaches the boundary of its scroll box.

The overscroll-behavior property specifies the overscroll behavior for a scroll container element. It allows the content author to specify that a scroll container element must prevent scroll chaining and/or overscroll affordances.

An element that is not scroll container must accept but ignore the values of this property. This property must be applied to all scrolling methods supported by the user agent.

Note: This property should prov >preventDefault instead.

Name:
Value: [ contain | none | auto ]
Initial: auto auto
Applies to: scroll container elements
Inherited: no
Percentages: n/a
Computed value: see individual properties
Canonical order: per grammar
Animation type: discrete
Media: visual

The overscroll-behavior property is a shorthand property that sets the specified values of overscroll-behavior-x and overscroll-behavior-y in that order. If only one value is specified, the second value defaults to the same value.


Values have the following meanings:

This value indicates that the element must not perform non-local boundary default actions such as scroll chaining or navigation. The user agent must not perform scroll chaining to any ancestors along the scroll chain regardless of whether the scroll originated at this element or one of its descendants. This value must not modify the behavior of how local boundary default actions should behave, such as showing any overscroll affordances. This value implies the same behavior as contain and in addition this element must also not perform local boundary default actions such as showing any overscroll affordances. This value indicates that the user agent should perform the usual boundary default action with respect to scroll chaining, overscroll and navigation gestures.

Note: In the case where a user agent does not implement scroll chaining and overscroll affordances, these values will have no side effects for a compliant implementation.

Note: Programmatic scrolling is clamped and can not trigger any boundary default actions.

4.1. Physical Longhands for overscroll-behavior

Name: ,
Value: contain | none | auto
Initial: auto
Applies to: scroll container elements
Inherited: no
Percentages: N/A
Computed value: as specified
Canonical order: per grammar
Animation type: discrete
Media: visual

The overscroll-behavior-x property specifies the overscroll behavior in the horizontal axis and the overscroll-behavior-y property specifies the overscroll behavior in the vertical axis. When scrolling is performed along both the horizontal and vertical axes at the same time, the overscroll behavior of each respective axis should be considered independently.

4.2. Flow-relative Longhands for overscroll-behavior

Name: ,
Value: contain | none | auto
Initial: auto
Applies to: scroll container elements
Inherited: no
Percentages: N/A
Computed value: as specified
Canonical order: per grammar
Animation type: discrete
Media: visual

These properties correspond to the overscroll-behavior-x and overscroll-behavior-y properties. The mapping depends on the element’s writing-mode.

5. Security and Privacy Considerations

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with , like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with , like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with , like this: UAs MUST provide an accessible alternative.

Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet A CSS style sheet. renderer A UA that interprets the semantics of a style sheet and renders documents that use them. authoring tool A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.


Can I use CSS overscroll-behavior?

Compatibility table for support of CSS overscroll-behavior in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

CSS overscroll-behavior

Global usage

CSS property to control the behavior when the scroll position of a scroll container reaches the edge of the scrollport.

  1. 5.5
  2. 6
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76

Firefox

  1. 2
  2. 3

  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5
  3. 6
  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13
  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76

Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

Как создать div блок с прокруткой?

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow

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

overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Свойства и значения overflow

visible — отображается все содержание элемента, даже за пределами установленной ширины.
hidden — отображается только область внутри элемента, остальное скрыто.
scroll — принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto — автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Принудительная установка прокрутки в блоке CSS

Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Пример div блока с прокруткой

Код HTML и CSS

Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Демонстрация Скачать исходники
Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

Спасибо за внимание! Надеюсь статья была полезна!

Полосы прокрутки: CSS свойство overflow, тонкости.

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

Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам ( display : block ; или те которые изначально являются блочными — div и так далее).

Возможные значения, которые принимает это свойство(по-умолчанию visible ):

  • Visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
  • Hidden — Отображается только область внутри элемента, остальное будет скрыто.
  • Scroll — Всегда добавляются полосы прокрутки.
  • Auto — Полосы прокрутки добавляются только при необходимости.
  • Inherit — Наследует значение родителя.

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

В демо вы сможете пронаблюдать, как действует каждое из значений свойства на деле:

Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto :

Мы видимо, что текст во всех случаях корректно отображается внутри блока, кроме небольшого неудобства в случае со scroll , где появляются неактивные полосы прокрутки.

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow : visible ; специально размещен другой блок и закращен в другой цвет. Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow : visible ; и height : auto ; ). Исправляется это заменой значения visible на hidden , следует помнить, что это свойство стоит указывать только блокам с height : auto ; , если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow : visible ; и height : auto ; задано еще и какое-нибудь значение свойства float . Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

Илон Маск рекомендует:  Облачная автоматизация становится обыденностью
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL