Go Summarize

2 better alternatives to overflow: hidden

Kevin Powell2023-12-14
Kevin Powell#css#front-end#frontend#html#web development#css tutorial#tutorial#css overflow#overflow#overflow hidden#overflow clip#overflow auto#overflow hidden one axis only#css overflow problems#overflow issues#css contain#contain paint#css containment#overflow hidden css#css tricks#css overflow property#css overflow hidden#css overflow scroll#css overflow auto
140K views|5 months ago
💫 Short Summary

The video discusses issues with using 'overflow: hidden' in CSS and suggests alternatives for performance improvement, such as the Polyan developer browser. The importance of targeting specific elements causing overflow is emphasized, with a warning against using overflow hidden. CSS properties like 'visible' and 'hidden' are demonstrated to control overflow behavior, with a focus on the 'clip' property. The benefits of using 'contain: paint' for optimizing performance are highlighted, despite potential limitations on absolute and fixed elements. The video also showcases a parallax effect created using pure CSS and encourages viewers to enhance their online presence.

✨ Highlights
📊 Transcript
Issues with 'overflow: hidden' in CSS and better alternatives.
The speaker introduces Polyan, a developer browser, to identify and troubleshoot overflow issues more effectively.
Polyan features tools like highlighting overflowing elements in red for easier detection.
Benefits of using Polyan and encouragement for viewers to try it for free or purchase to support the channel.
Practical insights into managing overflow in web development.
Importance of identifying and targeting specific elements causing overflow in HTML.
Using overflow hidden can lead to issues like scroll bars and prevent sticky headings.
Demonstrates how using overflow hidden can result in losing shadows and causing additional scroll bars within elements.
Solution proposed is to switch to using 'clip' instead of 'hidden' to avoid these issues and ensure proper visibility and functionality.
CSS properties 'visible' and 'hidden' are used to control overflow behavior on a webpage.
The 'clip' property helps prevent unwanted scrolling issues by containing content within specified boundaries.
The 'clip-margin' property allows for adjusting overflow amounts in different directions, providing more customization options.
There is a potential bug in Chrome where declaring only one axis for 'overflow clip margin' can cause the entire feature to stop working.
Overflow clip property overview.
Overflow clip is supported in all major browser engines except Safari.
It allows control over overflow content and prevents elements from scrolling out of view.
Using Overflow clip or contain paint can improve performance by preventing off-screen elements from being painted.
Contain paint ensures children elements are never painted outside the parent element, aiding performance and optimization.
Use of 'contain: paint' in CSS for optimizing performance and rendering elements only when needed.
Potential creation of a new containing block, affecting the positioning of absolute and fixed elements.
Browser support for 'contain' is over 95%.
Showcase of a parallax effect created using pure CSS without JavaScript.
Creator expressing gratitude to supporters and encouraging viewers to enhance their online presence.