はてなブックマーク

Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like 100vh. Philip Braunen explores why this happens and presents a solution to fix it. I was recently asked by a student to h

Finding the right typeface for a logo is a challenge and can be a very time-consuming process that requires both creativity and a practical approach. Levi Honing provides the essential background and tools to enhance your typography journey and apply this knowledge to your logo design. Let’s dive deep to learn how to create a logo that is not only expressive but also purposeful and well-thought-ou

Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and present state of regular expressions in JavaScript with tips to make your regexes more readable, maintainable, and resilient. Modern JavaScript regular expressions have come a long way compared to what you

Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3

Not all companies can afford to hire a full-time UX writer (or are mature enough to consider it yet). As a result, UX writing is often outsourced to team members who may not have sufficient expertise in working with text, such as UX designers and product managers, or to the content or marketing team, who may lack expertise in UX. Meanwhile, interface copy plays a crucial role in the overall user e

What are these CSS Container Style Queries, and why should you use them? Juan Diego Rodríguez delves deeply into style queries, and not at the syntax level, but at what exactly they are solving and what sort of use cases you would find yourselves reaching for them in your work if and when they gain browser support. We’ve relied on media queries for a long time in the responsive world of CSS but th

Do perfect Lighthouse scores mean the performance of your website is perfect? As it turns out, Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as Salma Alam-Naylor demonstrates in several experiments. This article has been kindly supported by our dear friends at Sentry.io, who help developers see what actually

The times for CSS have probably never been more exciting than today. In this quick read, we’ve got some useful CSS tips and techniques for you that you can apply to your work right away. Let’s dive deeper into self-modifying CSS variables, hanging punctuation, and more. If you’ve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to co

Imagine finally resolving never-ending discussions about UI decisions for good. Here are some practical examples of decision trees for UI components and how to use them effectively. An upcoming part of Smart Interface Design Patterns. How do you know what UI component to choose? Decision trees offer a systematic approach for design teams to document their design decisions. Once we’ve decided what

How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way. Naming is hard. As designers and developers, we often struggle finding the right name — for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it’s difficult to unders

It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. But amidst this abundance, the modern CSS features we have today offer simpler and more flexible approaches without the added dependencies or abstractions. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically any

Custom properties and CSS variables are often used interchangeably when describing placeholder values in CSS despite the fact that they are different but related concepts. Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined a

Creating shapes using CSS is, without any doubt, a classic exercise. In many cases, we try to use hacky code and workarounds, but CSS has evolved, and we have modern ways to create CSS Shapes with clean, reusable code. In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible. You have for sure googled “how t

While the CSS :has() pseudo-class is widely celebrated for its ability to select a parent element up the chain conditionally based on its contents, there is more conditional logic it is capable of handling when we move it up the chain, so to speak. Amit Sheen demonstrates using :has() to apply styles conditionally when a certain <option> in a <select> element is chosen by the user and how we gain

Editor’s Note: This article has been updated with additional accessibility considerations for motion sensitivities. Remember the HTML <marquee> element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that

In Part 1 of this series, Temani Afif explored different CSS techniques to create tooltip shapes. The main challenge was to rely on a single element and create optimized code that could easily be controlled using CSS variables to update the size, shape, and position of the tail. In this second part, you are going explore more shapes. I hope you were able to spend time getting familiar with the tec

The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That’s because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different

Who doesn’t love a good front-end tool? In this roundup, you’ll find useful front-end tools that were popular last year and will help you speed up your development workflow. Let’s dive in! Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack developers. These t

Since the introduction of CSS viewport units in 2012, many of us have been using width: 100vw as a way to set an element’s width to the full width of the viewport. But, as Šime Vidas explains in this deep dive, 100vw does not always represent the full width of the viewport due to differences in how browsers handle scrollbars. Learn why this is an issue, how to avoid it, and what approaches we may

And that’s not because of one hot screaming new feature that changes everything — say, Cascade Layers or new color spaces — but how many of the new features work together to make my styles more succinct, resilient, and even slightly defensive. Let me explain. Efficient Style GroupsHere’s a quick hit. Rather than chaining :hover and :focus states together with comma separation, using the newer :is(

Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorp

Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single <img> tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code. In a previous article, we explored fancy hover effects for images that involve shin

Imagine the situation when you’ve hovered over a menu item that reveals another list of menu items, then tried to hover over that nested menu only to have the entire menu close on you. Is this a UX challenge you’ve struggled with? A well-known concept called the “safe triangle” solves this issue. While it’s been tackled many ways over the years, Costa Alexoglou has what he believes is a relatively

It is challenging to accurately understand the preferences of over 7.8 billion people at any given time. Carie Fisher outlines which CSS media features are available for detecting user preferences and how they are used to design and build more inclusive experiences. We make a series of choices every day. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea?

Join Temani Afif on experiment with modern CSS features to create an array of colors. The goal is to define a comma-separated list of colors and iterate through them using an index. CSS is mainly known as a language based on a set of property-value pairs. You select an element, define the properties, and write styles for it. There’s nothing wrong with this approach, but CSS has evolved a lot recen

CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet). Is there anything in the front-end world that’s evolv

You might think you know all the tricks when it comes to browser DevTools, but did you know that there are dozens of panels and hundreds of features waiting to supercharge your debugging workflow? Whatever your debugging use case is, there’s probably a tool that’s right for the job. Let’s discover the most popular DevTools tips that can boost your productivity. When it comes to browser DevTools, w