Video (filmed at An Event Apart) and slides from “Modern Layouts: Getting Out of Our Ruts” by Jen Simmons: In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems we all settled into a handful of patterns and …
Tag Archives: css
universal.css
The only .css file you’ll ever need, following the most recent CSS methodologies where you define just about everything in separate classes. Usage is really easy: Take any CSS rule you want to apply, replace : by -, and dots by -dot-, and you get the name of the corresponding universal css classname. For instance, …
Flexbugs – Flexbox issues and cross-browser workarounds for them.
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here. Truth be told, most of the time “something is not as I’d expect” when using flexbox 😛 …
Continue reading “Flexbugs – Flexbox issues and cross-browser workarounds for them.”
Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)
UPDATE 2017.12: For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it. html, body { overscroll-behavior-y: none; } Safari however does not support it … UPDATE 2021.06: The workaround below no longer seems to work in recent iOS/MobileSafari versions …
Continue reading “Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)”
A Complete Guide to CSS Grid Layout
Great cheat sheet / guide by Chris House, on Grid Layout — a CSS spec that has gotten me really excited ever since it has been announced (over two years ago): My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. So I …
CSS: Selecting a range of elements
Say you want to select the 7th up and to the 14th element of a set of elements. It’s possible, using this selector: ol li:nth-child(n+7):nth-child(-n+14) { background: lightpink; } See the Pen Selecting Ranges of Elements with CSS on CodePen. (from 12 Little-Known CSS Facts (The Sequel)) Related: Quantity Queries for CSS →
Multi-layered Parallax Illustration
See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen. Good use of data-* attributes to afford manipulation of the shifting of the backgrounds from within the HTML. Do note that the demo won’t run here on bram.us as the narrow screen layout – without parallax – will be used. Multi-layered Parallax Illustration …
Viewport Unit Based Typography
Styling Broken Images
Turns out it’s possible to style broken images. You know, from this: To this: But just “how”, one might ask? Because the <img> element is a replaced element controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can …
The future of loading CSS
It’s soon OK to link to stylesheets directly from anywhere inside the <body> without having FOUCs: The plan is for each <link rel="stylesheet"> to block rendering of subsequent content while the stylesheet loads, but allow the rendering of content before it. The stylesheets load in parallel, but they apply in series. This makes <link rel="stylesheet"> …