Articles Tagged
Platform News: Rounded Outlines, GPU-Accelerated SVG Animations, How CSS Variables Are Resolved
In the news this week, Firefox gets rounded outlines, SVG animations are now GPU-accelerated in Chrome, there are no physical units in CSS, The New York Times crossword is accessible, and CSS variables are resolved before the value is inherited.…
What does 100% mean in CSS?
When using percentage values in CSS like this…
.element {
margin-top: 40%;
}
…what does that % value mean here? What is it a percentage of? There’ve been so many times when I’ll be using percentages and something weird happens. …
Turning a Fixed-Size Object into a Responsive Element
I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, …
`lh` and `rlh` units
There’s some new units I was totally unaware of from the Level 4 spec for CSS values! The lh
unit is “equal to the computed value of line-height
” and rlh
is the same only of the root element …
Designing An Aspect Ratio Unit For CSS
Rachel Andrew says that the CSS Working Group designed an aspect ratio unit at a recent meeting. The idea is to find an elegant solution to those times when we want the height of an element to be calculated in …
Gradians and Turns: the quiet heroes of CSS angles
I love coming across little overlooked CSS gems, like the gradien (grad
) and turn (turn
) units that Ken Bellows uncovers in his post explaining them. I don’t know, maybe y’all are already aware of them, but …
The Lengths of CSS
There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the …