The truth about CSS selector performance
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article. Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance. A quick look behind the scenes The way you write CSS selectors does play a role i
CSS Style Queries
For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I’m sure we agree that this is exciting, isn’t it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style
Accessible Front-End Patterns For Responsive Tables (Part 1) — Smashing Magazine
There is no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns, which Adrian explains in this two-part series. Tables allow us to organize data into grid-like format of rows and columns. Scanning the table in one direction allows users to search and compare the data while scanning in the other direction lets users get
Tree views in CSS
A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Giant planets Gas giants Jupiter Saturn Ice giants Uranus Neptune The HTML We begin with the HTML for simple nested lists: <ul> <li> Giant pl
Line-height Crop — a simple CSS formula to remove top space from your text
One of the advantages of doing so is that the crop value will be automatically updated if you decide to change the value of your CSS variables (with no need to modify the mixin call) or if the line-height variable is modified at different media queries (with no need to re-use the mixin). The mixin explainedWhen using the lhCrop mixin, a ::before pseudo-element is created with a negative margin whi
Full Width Containers in Limited Width Parents | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I bookmarked a tweet a few months ago, as it was a bonafide CSS trick and that’s what we love around here. The issue is: how do we make a full-browser-width container when we’re inside a limited-width parent? Starting Point This image is 100% wide as it’s limited-width paren
State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
A Deep CSS Dive Into Radial And Conic Gradients — Smashing Magazine
In this article, we’ll be taking a closer look at two gradients: conic-gradient and radial-gradient. You’ll see how each one of them works in detail, what the differences and similarities are between them, how and where to use them, and some use cases for each. CSS gradients are a useful CSS feature that can be used to create interesting UI effects or even help us in drawing something without the
Conditional Border Radius In CSS
A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I’m always curious to see how people write CSS. I noticed a very, very interesting border-radius value for the card component in the main feed. I shared the following tweet about this little discovery. Then, I received this reply from Miriam Suzanne: is it always 8px? That math looks like a toggle
Designing Beautiful Shadows in CSS
IntroductionIn my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this t
CSS Container Queries For Designers
Working on a web design involves handling the design for different screen sizes. Based on those designs, the developer will use CSS media queries to detect the viewport width or height, and then alter the design based on that. This is how we used to design web layouts for the past 10 years, and it’s about to get even better. I have some good news for you. CSS Container queries, a long-requested fe
A Collection of Separator Styles | Codrops
A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. Today we’d like to share some separator styles with you. When you have several sections in one page, it’s nice to separate them with some kind of line or backgr
Modern CSS Upgrades To Improve Accessibility | Modern CSS Solutions
Modern CSS Upgrades To Improve Accessibility Posted on: Apr 9, 2021 Written by Stephanie Eckles Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device. This post will cover a range of topics: Focus Visibility Fo
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly | Articles | web.dev
Aspect ratio Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio. Two images with the same aspect ratio. One is 634 x 951px while the other is 200 x 300px. Both have a 2:3 aspect ratio. With the ad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5 CSS snippets every front-end developer should know in 2024 | Articles | web.dev
New Viewport Units | 12 Days of Web
Cool Hover Effects That Use Background Properties | CSS-Tricks
Understanding min-content, max-content, and fit-content in CSS - LogRocket Blog
GitHub - jsxtools/cqfill: Polyfill for CSS Container Queries
