Fupio is the easiest way to share online Learn more »
Join FupioA learning community for front-end designers and developers
random() function that works in all browsers.
animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs.
Mehmet Kose liked this
.prefix-*.
Mehmet Kose liked this
<dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it.
writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, and the direction in which blocks and lines progress..element {
writing-mode: vertical-rl;
}Mehmet Kose liked this
pointer-events property controls whether an element can become the target of pointer events like clicks, hover states, and other pointer-based events. In other words, it lets you decide whether the browser should treat an element as interactive when the pointer is over it..no-pointer-events {
pointer-events: none;
}Mehmet Kose liked this
<select>, new web platform features, and more.view() for boundary-aware CSS
border-shape property!shape()? corner-shape? border-shape?! Where did all these come from?
Mehmet Kose liked this
translateZ() function adds depth to an element, drawing it closer or farther in space. In other words, it shifts an element along the Z-axis in a 3D space..box:hover {
transform: translateZ(100px);
}
.box.perspective:hover {
transform: perspective(500px) translateZ(100px);
}perspective() function or perspective property is necessary for translateZ() to work. Without either one, there’s notranslateY() function shifts an element vertically by the specified amount. Specifically, it shifts an element either up or down, depending on whether the value is positive or negative..parent:hover .box {
transform: translateY(50%); /* Shift down by half the element's height */
}translateX() function shifts an element horizontally by the specified amount. Specifically, it displaces an element to the right or the left, depending on whether the value is positive or negative..parent:hover .box {
transform: translateX(50%);
}translate() function shifts an element from its default position on a two-dimensional plane. This way, we can reposition an element horizontally, vertically, or both..parent:hover .box {
transform: translate(50px, 50%);
}translate()
300ms, but only once the whole element is within the viewport.
alpha() function, Grid Lanes, some things about <dialog> that you might not know, CSS Wordle, and more — this is What’s !important right now.@function will probably be the biggest CSS feature to probably become Baseline this year, so I definitely found it a bit intimidating at first.
<nav> labels. There’s no need. If we did, we’d hear something like “Navigation, Primary navigation”. Not the end of the world, but unnecessarily repetitive for screen reader users.
offset-path property in CSS defines a movement path for an element to follow during animation.motion-path. This, and all other related motion- properties, are being renamed offset- in the spec. We’re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.