CSS overflow module (#26425)

* edits to overflow * add css scrollbars module and data type * CSS Module page: Overflow * text-overflow and review fixes * Update files/en-us/web/css/css_overflow/index.md * Apply suggestions from code review Co-authored-by: Dipika Bhattacharya <[email protected]> * Update files/en-us/web/css/css_overflow/index.md --------- Co-authored-by: Dipika Bhattacharya <[email protected]>
mdn · Apr 28, 2023 · 2e03de7 · 2e03de7
1 parent 7ad5a84
commit 2e03de7
Showing 1 changed file with 56 additions and 15 deletions.
diff --git a/files/en-us/web/css/css_overflow/index.md b/files/en-us/web/css/css_overflow/index.md
@@ -7,44 +7,85 @@ spec-urls: https://drafts.csswg.org/css-overflow/#propdef-overflow
 
 {{CSSRef}}
 
-The **CSS Overflow** module contains the features of CSS relating to scrollable overflow handling in visual media. In CSS overflow happens when the content of a box extends past one or more of the box's edges.
+The **CSS overflow** module properties enable you to handle scrollable overflow in visual media.
 
-## Ink overflow and scrollable overflow
+Overflow happens when the content in an element box extends past one or more of the box's edges. **Scrollable overflow** is the content that appears outside the element box for which you might want to add a scrolling mechanism. CSS overflow properties enable you to control what happens when content overflows an element box.
 
-There are two types of overflow that you might encounter in CSS. The first is described as **ink overflow**. This is the overflow of painting effects which do not affect layout or otherwise extend the scrollable overflow region, such as box shadows, border images, text decoration, overhanging glyphs, outlines, etc.
+Painting effects that overflow the content but do not participate in the CSS box model do not affect layout. This type of overflow is also known as {{Glossary("ink overflow")}}. Examples of ink overflows include box shadows, border images, text decoration, overhanging glyphs, and outlines. Ink overflows do not extend the scrollable overflow region.
 
-The overflow that we sometimes need to manage in CSS is described as **scrollable overflow**. This is the content appearing outside of the box for which scrolling mechanisms need to be provided. The overflow properties are how we can control what happens when content overflows a box.
+## Overflow in action
 
-## Basic example
+Use the following interactive example to see the effects of various `overflow` property values on the content overflow and scrollbars in the adjacent fixed-size box.
 
-The following interactive example shows how changing the value of the `overflow` property, changes how the overflow of a fixed height box is dealt with.
+The example also includes options to change the values for the `overflow-clip-margin` and `width` properties, as well as to programmatically scroll the content if the overflow property creates a {{Glossary("scroll container")}}. Select `overflow: clip` and see the effect of different `overflow-clip-margin` values. Select `overflow: hidden` or `overflow: scroll` to check out different `ScrollLeft` and `ScrollTop` slider settings.
 
-{{EmbedInteractiveExample("pages/css/overflow.html")}}
+{{EmbedGHLiveSample("css-examples/modules/overflow.html", '100%', 320)}}
+
+A link is included in content box above to demonstrate the effects of keyboard focus on overflow and scroll behaviors. Try tabbing to the link or programmatically scrolling the content: the content will scroll only if the enumerated `<overflow>` value created a scroll container.
 
 ## Reference
 
 ### CSS properties
 
-- {{CSSxRef("overflow")}}
+- {{CSSxRef("overflow")}} shorthand
 - {{CSSxRef("overflow-block")}}
+- {{CSSxRef("overflow-clip-margin")}}
 - {{CSSxRef("overflow-inline")}}
 - {{CSSxRef("overflow-x")}}
 - {{CSSxRef("overflow-y")}}
+- {{CSSxRef("scroll-behavior")}}
+- {{CSSxRef("scrollbar-gutter")}}
 - {{CSSxRef("text-overflow")}}
-- {{CSSxRef("block-overflow")}} {{experimental_inline}}
+- {{CSSxRef("block-ellipsis")}}
+- {{CSSxRef("continue")}} {{experimental_inline}}
 - {{CSSxRef("line-clamp")}} {{experimental_inline}}
 - {{CSSxRef("max-lines")}} {{experimental_inline}}
-- {{CSSxRef("continue")}} {{experimental_inline}}
-
-### Non-standard properties
-
 - {{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}
 
+### Data types
+
+- [`<overflow>`](/en-US/docs/Web/CSS/overflow_value) enumerated values
+
+## Guides
+
+- [Overflowing content](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content)
+  - : CSS building block: learn what overflow is and how to manage it.
+- {{Experimental_Inline}} [Creating a named scroll timeline](/en-US/docs/Web/CSS/scroll-timeline-name#creating_a_named_scroll_timeline)
+  - : The CSS scroll timeline {{cssxref('scroll-timeline-name')}} and {{cssxref('scroll-timeline-axis')}} properties, along with the {{cssxref('scroll-timeline')}} shorthand, create animations tied to the scroll offset of a scroll container.
+
+## Related concepts
+
+- {{CSSxRef("scrollbar-width")}} CSS property
+- {{CSSxRef("scrollbar-color")}} CSS property
+- {{CSSxRef("scroll-behavior")}} CSS property
+- {{CSSxRef("scrollbar-gutter")}} CSS property
+- {{cssxref("scroll-margin")}} CSS shorthand property
+- {{cssxref("scroll-padding")}} CSS shorthand property
+- {{cssxref("scroll-snap-align")}} CSS property
+- {{cssxref("scroll-snap-stop")}} CSS property
+- {{cssxref("scroll-snap-type")}} CSS property
+- {{cssxref("text-overflow")}} CSS property
+- {{CSSxRef("::-webkit-scrollbar")}} pseudo-element
+- [`scrollbar`](/en-US/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA role
+- Element {{domxref("Element.scroll", "scroll()")}} method
+- Element {{domxref("Element.scrollBy", "scrollBy()")}} method
+- Element {{domxref("Element.scrollIntoView", "scrollIntoView()")}} method
+- Element {{domxref("Element.scrollTo", "scrollTo()")}} method
+- Element {{domxref("Element.scrollTop", "scrollTop")}} property
+- Element {{domxref("Element.scrollLeft", "scrollLeft")}} property
+- Element {{domxref("Element.scrollWidth", "scrollWidth")}} property
+- Element {{domxref("Element.scrollHeight", "scrollHeight")}} property
+- Document {{domxref("Document.scroll_event", "scroll")}} event
+- {{Glossary("Scroll container")}} glossary term
+- {{Glossary("Ink overflow")}} glossary term
+
 ## Specifications
 
 {{Specifications}}
 
 ## See also
 
-- Properties for controlling the look of scrollbars {{CSSxRef("scrollbar-width")}} and {{CSSxRef("scrollbar-color")}}
-- How to [Debug scrollable overflow](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/debug_scrollable_overflow/index.html).
+- [CSS scrollbars styling](/en-US/docs/Web/CSS/CSS_scrollbars) module
+- [CSS scroll snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap) module
+- [CSSOM view](/en-US/docs/Web/CSS/CSSOM_View) module
+- How to [debug scrollable overflow](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/debug_scrollable_overflow/index.html)