Select Page

Category: Article

CSS Environment Variables

We were all introduced to the env() function in CSS when all that drama about “The Notch” and the iPhone X was going down. The way that Apple landed on helping us move content away from those “unsafe” areas was to provide us essentially hard-coded variables to use: padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); Uh ok! Weird! Now, nine months later, an “Unofficial Proposal Draft” for env() has landed. This is how specs work, as I understand it. Sometimes browser vendors push forward with stuff they need, and then it’s standardized. It’s not always waiting around for standards bodies to invent things and then browser vendors implementing those things. Are environment variables something to get excited about? Heck yeah! In a sense, they are like a more-limited version of CSS Custom Properties, but that means they can be potentially used for more things. CSS environment variables are getting standardized:https://t.co/QKFBM3WFT2Allow to get and use the browser- and author-defined variables: typography, colors, notch and other specific layout/device values.They work in Media Queries, where CSS Custom Properties cannot be used. pic.twitter.com/FWrPiBiAqp — Serg Hospodarets (@malyw) April 29, 2018 👀 Brand new spec for global env() variables in CSS: https://t.co/6YfXWFTyhN Forget notches, the important thing here is the ability to separate CSS variables from the cascade. Cool ① for perf/code organization ② because you might be able to use them in media queries! —...

Read More

Inspecting Animations in DevTools

I stumbled upon the Animation panel in Chrome’s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could’ve hoped: it lets you control and manipulate CSS animations and visualize how everything works under the hood. To access the panel, head to More Tools → Animations in the top right-hand menu when DevTools is open: Many of the tutorials I found about this were pretty complicated, so let’s take a step back and look at a smaller example to begin with: here’s a demo where the background-color of the html element will transition from black to orange on hover: html { cursor: pointer; background-color: #333; transition: background-color 4s ease; } html:hover { background-color: #e38810; } Let’s imagine that we want to nudge that transition time down from 4s. It can get pretty annoying just bumping that number up and down in the element inspector. I typically would’ve opened up DevTools, found the element in the DOM and then ever-so-slowly manipulate it by typing in a value or using the keyboard directional keys. Instead, we can fire up that demo, open DevTools, and switch to the Animation tab which ought to look something like this: By default, Chrome will be “listening” for animations to take place. Once they...

Read More

Responsive Knockout Text With Looping Video

Here’s an idea! Let’s make an an HTML play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this responsively. The idea is to not only scale the video in size to fit the parent container (as video generally does), but scale the text as well, maintaining the size relationship between the type and underlying video. We’re going to get there by using the CSS clip-path...

Read More

Container-Adapting Tabs With “More” Button

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways. There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website… We agreed it should be a one-liner because the amount of tab items is unknown and narrowed our options down to two: horizontal scroll and...

Read More

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a . This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type="number" isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does,...

Read More
000webhost logo