标签：#css

GitHub热门项目 | Anti-AI-slop design skill for Claude Code, Cursor, and Codex. | Stars: 4,753 | 802 stars today | 语言: CSS

Earlier this month I shipped two premium templates — a SaaS landing page and a developer portfolio. Not a startup, not a SaaS, just templates. This post is about the two constraints I built them under, why they made the code better, and a few things I learned launching as a solo dev with zero audience. Constraint 1: zero dependencies beyond next, react, and tailwind Open the package.json of most templates and you'll find 20+ packages: icon libraries, animation libraries, carousel plugins, UI kits, utility libraries. Every one of them is a version conflict waiting to happen for the buyer, and most are replaceable with a few lines of code in 2026. What I used instead: Icons → inline SVG components. An icon component is ~10 lines. You need maybe 15 icons for a landing page. Animations → plain CSS. Scroll-blur navbars, gradient glows, an animated "typing" terminal — all doable with keyframes and transitions. No framer-motion. The dashboard mockup in the hero → pure CSS. Divs, borders, gradients. It looks like a product screenshot but it's ~80 lines of JSX and weighs nothing. Result: both templates land at ~100KB first-load JS, npm install takes seconds, and there is nothing to break when Next.js 16 arrives. Constraint 2: every piece of content in ONE typed config file The thing I hated most about templates I've used: content is smeared across 30 components. Changing a headline means hunting through JSX. So both templates keep all content in a single file — lib/content.ts for the landing page, site.config.ts for the portfolio. Headlines, nav, pricing tiers, testimonials, project lists, even the lines that animate in the fake terminal. Components are pure renderers of that config's TypeScript type. Two things surprised me here: TypeScript becomes your content linter. Forget an alt text, malform a link, give a pricing tier three features when the type expects a non-empty array — the build fails. Content mistakes surface at compile time. It forces better component design. W

Many developers still rely on heavy, third-party JavaScript frameworks or external UI libraries just to create simple popups and modal windows. This introduces bloated bundle sizes, slows down page speed, and often ruins accessibility (a11y) for keyboard users and screen readers. Fortunately, you can build an accessible, highly interactive modal window completely natively using the modern HTML5 <dialog> element. The Code Setup Here is how simple it is to build a native modal with semantic HTML, minimal JavaScript, and a touch of modern CSS styling. 1. The Markup (index.html) <main> <h1> Native HTML5 Dialog Element </h1> <p> Click the button below to open a completely native, accessible popup modal. </p> <button id= "openModalBtn" > Open Modal Window </button> </main> <dialog id= "myModal" > <h2> Native Modal Title </h2> <p> This modal is rendered natively by the browser. Focus is trapped automatically! </p> <button id= "closeModalBtn" > Close Modal </button> </dialog> ### 2. The Logic (script.js) Instead of manually managing visibility states or toggle classes, the browser gives us built-in `.showModal()` and `.close()` methods: javascript const modal = document.getElementById('myModal'); const openBtn = document.getElementById('openModalBtn'); const closeBtn = document.getElementById('closeModalBtn'); openBtn.addEventListener('click', () => { modal.showModal(); }); closeBtn.addEventListener('click', () => { modal.close(); }); dialog ::backdrop { background-color : rgba ( 0 , 0 , 0 , 0.6 ); backdrop-filter : blur ( 4px ); } dialog { border : none ; border-radius : 8px ; padding : 2rem ; box-shadow : 0 4px 12px rgba ( 0 , 0 , 0 , 0.15 ); } Interactive Demos & Source Code Working Live Code Demo: ( https://codepen.io/editor/CoderDecoding/pen/019f5548-f0cb-75f8-b915-b9fdb33e92d1 ) Public Code Repository: ( https://github.com/CoderDecoding/native-dialog-demo )

Headline: Tailwind v4 is the most significant rewrite since the framework launched — CSS-first config, Lightning CSS under the hood, container queries built-in, and no more tailwind.config.js . I migrated two production projects and here's what actually broke and what the upgrade tool misses. Tailwind CSS v4 arrived with a steeper upgrade curve than most version bumps in the JS ecosystem. The configuration story changed completely. The build engine changed. Several features that previously required plugins are now built-in. The headline change: no more tailwind.config.js In v3, configuration lived in a JavaScript file — theme extensions, plugins, content paths. In v4, it moves into your CSS: @import "tailwindcss" ; @theme { --color-brand : #6366f1 ; --spacing-18 : 4.5rem ; } Theme tokens become CSS custom properties under @theme , and Tailwind generates utility classes automatically. The content array is gone — v4 detects source files automatically. The new engine: Lightning CSS Tailwind v4 ships with Lightning CSS replacing PostCSS as the default: Build times drop significantly (cold rebuild went from ~8s to under 3s on the dashboard) CSS nesting works natively without a plugin Modern CSS features like color-mix() , @starting-style , oklch are transpiled automatically autoprefixer is no longer needed New features built-in Container queries — native in v4, no plugin needed: <div class= "@container" > <div class= "grid grid-cols-1 @sm:grid-cols-2" > ... </div> </div> 3D transforms — rotate-x-45 , rotate-y-12 , perspective-1000 for card flip effects without inline styles. Dynamic spacing — p-13 , mt-22 work without explicit definition. Migration: the upgrade tool and what it misses npx @tailwindcss/upgrade@next The codemod handles the mechanical parts. What it missed: Custom plugins — the JS plugin API changed; non-trivial v3 plugins need a rewrite to the new @plugin / @utility API theme() calls in CSS — replace theme('colors.zinc.900') with var(--color-zinc-900) ; gr

There's a project on every developer's machine that has Sass installed for one reason: &:hover {} . Not @mixin . Not @each . Just the nesting. The variables long since became --custom-properties . The only thing still justifying node_modules/sass is the ability to write child selectors inside parent rules. CSS added that natively in 2023. It shipped in Chrome 112, Firefox 117, and Safari 16.5 — every major browser released in the last two years. The compiler is not earning its spot anymore. What you've been writing in Sass The classic pattern — component styles scoped to a block, with states and modifiers nested inside: .card { padding : 1 .5rem ; border-radius : 0 .5rem ; background : var ( -- surface ); & :hover { background : var ( -- surface-hover ); } & __title { font-size : 1 .125rem ; font-weight : 600 ; } & --featured { border : 2px solid var ( -- accent ); } } The output is flat, specificity-controlled CSS. The source is organized by component. That's the trade Sass nesting has always offered — and native CSS now offers the same deal. The same thing in native CSS .card { padding : 1.5rem ; border-radius : 0.5rem ; background : var ( --surface ); &:hover { background : var ( --surface-hover ); } & .card__title { font-size : 1.125rem ; font-weight : 600 ; } & .card--featured { border : 2px solid var ( --accent ); } } Two differences are worth noticing. First: pseudo-classes work exactly as in Sass — &:hover resolves to .card:hover with no extra syntax. Second: descendant selectors require an explicit & followed by a space. & .card__title becomes .card .card__title . This is where native nesting differs from BEM's __ / -- convention: in native CSS, & is a selector reference , not a string concatenation operator. If you're using BEM naming heavily, &__foo becomes & .block__foo . The compiled output is identical; the source is slightly more explicit about what's happening. Media queries nested inside their rules This is the feature that earns native nesting a pe

We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property! Get Ready For the Powerful CSS border-shape Property! originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Sand bottle - WebGPU Remember those bottles filled with colored sand that you can find in many souvenir stores? Liam Egan created a digital version using JavaScript WebGPU API. Click to drop sand, use the arrows to tilt and shake the bottles, and relax while enjoying this sandy demo. Button State Builder Margarita shared this button builder that allows to customize a control with icons, text, color, shape... even all the behavior in the different states of the button. Then you can easily get the HTML, CSS, and JS code to put it on any website. Pretty cool. WebGL Switch Button In this demo, the whole page turns into a giant three-dimensional toggle switch that can be activated clicking anywhere on the viewport. Explore the component: mouse over to make the component tilt or scroll to zoom in and out. A nice job by Toc. Animated radial gradient mask over text This demo is exactly what the title says: a radial gradient applied as a mask to some text. Cassidy aligned it perfectly with the hole in the O from "Hello" that makes this effect chef's kiss . You will need to uncomment the animation property in CSS to see the demo in action. 221. ycw always creates impressive and original content. And this demo delivers. It's not only the effect in itself, but the use of light and shadows, and the perfecto choice of color that adds a timeless atmosphere. Beautiful. vRLbdoSAIsoSQvisac Mustafa Enes created different versions of this idea over the past month, all of them are great, but I picked this one as it is more interactive. Click on the screen to regenerate the pattern and move the mouse around to animate the colors. I don't know why, but there's a feeling of peace and joy while doing it. beach sunset I saw several demos by Vivi Tseng that caught my attention this month. Really enjoyed the general minimalistic style they all had and finally picked this animated one because it feels simple and pure, almost like a drawing a child would do during a vacation. I really enjoyed it

Bootstrap 5 and Tailwind CSS are the two most popular CSS frameworks in 2026. If you're starting a new project and trying to decide between them, this guide gives you an honest comparison based on real-world usage — not just feature lists. The Core Difference Bootstrap 5 gives you pre-built components. Tailwind CSS gives you utility classes to build your own. That's the fundamental difference and it drives every other comparison. With Bootstrap you get a navbar, modal, card, and dropdown out of the box. With Tailwind you build those yourself using utility classes like flex , px-4 , bg-blue . Neither is wrong. They solve different problems for different teams. When Bootstrap 5 Makes More Sense You Need to Ship Fast Bootstrap's pre-built components mean you spend less time on UI and more time on business logic. For admin dashboards, CRM panels, and internal tools — where UI consistency matters more than pixel-perfect custom design — Bootstrap is the faster choice. Your Team Knows HTML and CSS Bootstrap has a shallow learning curve. Any developer who knows basic HTML and CSS can pick up Bootstrap in a day. Tailwind requires understanding its utility-first philosophy and memorizing class names. You're Building an Admin Dashboard Admin dashboards need data tables, modals, dropdowns, sidebars, and form components — all of which Bootstrap provides out of the box. Building these from scratch with Tailwind takes significantly more time. You Want Predictable Output Bootstrap's components look consistent across browsers and screen sizes without extra configuration. Tailwind output depends heavily on how well your team implements it. When Tailwind CSS Makes More Sense You're Building a Custom Marketing Site If your design is highly custom — unique layouts, non-standard components, pixel-perfect design system — Tailwind gives you more flexibility without fighting Bootstrap's default styles. You Have a Design System Already If your team has a defined design system with specific t

Base64 image data URIs are one of those web techniques that look like a magic shortcut the first time you use them. Instead of referencing an external file: <img src= "/logo.png" alt= "Logo" > you can put the image bytes directly in the document as text: <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt= "Logo" > That can be useful. It can also make a page slower, harder to cache, and more annoying to maintain. Here is the practical rule: inline images as Base64 when self-containment matters more than caching. Keep normal image files when the browser should be able to cache, resize, lazy-load, or optimize them independently. What a Base64 image actually is An image file is binary data. Base64 rewrites that binary data as plain text using a limited character set. To make the browser treat the text as an image, you wrap it in a data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg... The first part tells the browser the MIME type. The second part tells it the data is Base64 encoded. The long tail is the image itself. Base64 is not compression. It is not encryption. It is just a text representation of the same bytes. When inlining an image is worth it 1. Tiny icons and UI assets For very small images, removing an extra HTTP request can be worth the extra bytes. This is especially true for small icons, logos, placeholders, simple UI sprites, or tiny transparent PNGs. Modern HTTP/2 and HTTP/3 make extra requests cheaper than they used to be, so this is not an automatic win. But for a one-off tiny asset inside a small page or widget, a data URI can still be a clean choice. 2. Single-file deliverables Sometimes the point is not raw page speed. Sometimes you need one file that carries everything with it: an HTML report an email template a CodePen or demo snippet a CMS block where you cannot upload assets a test fixture that should not depend on external hosting In those cases, Base64 is useful because the image travels with the HTML, CSS, JSON, or JavaScript.

When looking for a Property Management System (PMS) dashboard for a hotel project, I noticed most existing solutions look like they were built in 1998. I decided to code a modern, premium dashboard from scratch using pure HTML and vanilla CSS. I focused on two main design trends: Dark Mode and Glassmorphism. Here is a breakdown of how I approached the design, along with some CSS snippets you can use in your own projects. The Dark Mode Color Palette Instead of using pure black (#000000), I used a deep slate blue for the background. This reduces eye strain for hotel staff working night shifts and feels much more premium. `css :root { --bg-dark: #0f172a; /* Deep slate / --surface-dark: #1e293b; / Slightly lighter surface / --accent-gold: #facc15; / Premium gold for CTAs */ --text-main: #f8fafc; } body { background-color: var(--bg-dark); color: var(--text-main); }` The Glassmorphism Effect For the statistics cards (like Revenue and Occupancy Rate), I used a subtle glass effect to make them pop off the dark background without looking flat. `css .stat-card { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); }` The Result By combining these modern design tokens with a clean CSS Grid layout, the dashboard feels incredibly sleek. It tracks live bookings, room statuses, and RevPAR seamlessly. Want the full code? If you are a developer, agency, or freelancer building a SaaS or a booking system, you don't have to start from scratch. I've packaged the complete, fully responsive HTML/CSS template. You can see the design and grab the source code here to save yourself 20 hours of coding: 👉 Download the Lumina PMS Template Happy coding! Let me know if you have any questions about the CSS architecture in the comments.

HeroUI v3 is a redesigned React component library, previously NextUI, offering over 75 components, including 21 new ones, and a new React Native library with 37 components. Built on React Aria and Tailwind CSS v4, it emphasizes accessibility and customization. The library has experienced many updates since its release, and migration from the previous version is necessary. By Daniel Curtis

A customer texted me a screenshot last month. It was my own landing page, open on their Pixel. The headline — "Financial infrastructure to grow your revenue" — was clipped at "...grow your reven". The signup button below it was gray-on-slightly-lighter-gray, basically unreadable. And the hero image? A broken-image icon. Here's the part that stung: every check I had was green. Lighthouse: 98. My Playwright tests: passing. CI: all checkmarks. I had shipped that page an hour earlier feeling good about it. None of my tooling caught any of it. I want to walk through why , because I think a lot of us have this blind spot, and then I'll tell you what I did about it. CI tests the DOM. It does not test what a human sees. This is the core issue. My tests asserted things like "the signup button exists" and "the form has an email input." All true. The button was in the DOM . It just rendered unreadable on a 412px-wide screen with the system in light mode. Lighthouse runs one viewport (usually a throttled Moto G4 emulation) and scores performance/SEO/a11y heuristically . It does not look at your page across the actual range of devices your visitors use and say "this headline is physically clipped on a Pixel 8." And my "responsive testing"? I was dragging the Chrome devtools responsive bar to two breakpoints — 375 and 1440 — eyeballing it, and moving on. That's not testing. That's hoping. The three bugs that slipped through Let me get specific, because the category of each bug is instructive. 1. The clipped headline — a measurable, deterministic bug .hero-title { white-space : nowrap ; /* the culprit */ width : 100% ; overflow : hidden ; } On desktop, the headline fit. On a narrow viewport, white-space: nowrap refused to wrap, overflow: hidden clipped the overflow, and the last word vanished. The brutal thing: this is trivially detectable in code . The element's scrollWidth was greater than its clientWidth . That's a one-line check: const clipped = el . scrollWidth > el . clientW

If you're starting a web project, you're probably starting with a CSS reset, and for most of us, that means reaching for a trusted community solution - dropping it in and moving on. If you're building a design system, though, that habit may be working against you. The existing solutions The community reset ecosystem is genuinely good. Each tool approaches the browser compatibility problem from a slightly different angle. Some examples include: Eric Meyer's Reset is a classic: it zeros out margins, padding, and font sizes across every element, giving you a completely blank slate. It's minimal and predictable, which made it influential. Normalize.css smooths over inconsistencies while preserving the ones that are actually useful. sanitize.css and modern-normalize continue that evolution - incorporating contemporary best practices like box-sizing: border-box , improved form element handling, and accessibility-aware defaults. The problem isn't that any of these are bad. The problem is that they're all deliberately, necessarily generic. They can't know anything about your typeface, your color palette, your spacing scale, or how your interactive elements should behave. That's by design - they're tools for everyone, which means they're perfectly tailored for no one. The problem If you're building a design system, generic is exactly what you don't want your reset to be. The moment you drop in one of these resets and start building, you find yourself doing a second round of work. You apply your typeface to body . You reset margins on headings. You make form elements inherit fonts. You define focus styles. You're re-resetting - applying your design language on top of a layer that just cleared out the browser's defaults and replaced them with... more defaults you'll override. Worse, that duplication doesn't stay in one place. Every component you build either re-declares these foundational styles or silently assumes they're already set upstream. You end up with either redundanc

Comparing the most feature-rich React data grids in 2026, from pivot tables and tree data to...

Originally published on danholloran.me The original Grimicorn was an exercise in restraint: muted pastels on a blue-gray base, tuned so nothing on screen ever burns your eyes. Grimicorn Neon is the opposite impulse. Same grim-reaper-meets-unicorn idea, except this one is plugged into the mains — saturated, glowing accents on a near-black base, dark-only, loud on purpose. What makes the pair interesting from an engineering angle is how little had to change to get there. Neon is not a new theme so much as the same theme with the volume knob turned all the way up. That only works because of a decision made back in the calm version: colors are defined by role, not by appearance. Eight roles, eight louder hexes Both themes share the exact same role map. Blue is keywords, links, and the primary accent. Green is strings, success, and the cursor. Yellow is types, decorators, and warnings. The accent hierarchy is still blue → purple → teal, and the semantic anchors still hold: green means good, the error color means wrong. What changes is only the values bound to those roles. Calm Grimicorn's blue is a soft #83AFE5 ; Neon's is an electric #2323FF . Calm green is a sage #A9CE93 ; Neon green is an acid #A3E635 . The error role even swaps identity, from a gentle salmon to a hot #FF2D9B pink. Lay the two palettes side by side and the structure is identical — only the saturation and brightness move: // same eight roles, two personalities const calm = { blue : " #83AFE5 " , green : " #A9CE93 " , error : " #DD9787 " , base : " #253039 " , }; const neon = { blue : " #2323FF " , green : " #A3E635 " , error : " #FF2D9B " , base : " #0A0A0B " , }; Because every one of the fourteen tool ports — VS Code, Ghostty, Obsidian, Claude Code, JetBrains, tmux, and the rest — is generated from a single palette.md , producing the neon set was mostly a matter of feeding the build a different eight values. The emitters that translate roles into VS Code scopes or ANSI slots never knew the difference.

Why Semantic HTML is a Superpower for Your Website As I’ve been building my personal portfolio during the IYF Season 11 program, I realized that writing code is about more than just making things look "right"—it’s about making them accessible for everyone. The secret is Semantic HTML. What is Semantic HTML? Semantic HTML uses tags that provide meaning to the web page rather than just layout instructions. Tags like , , , , and tell the browser and screen readers exactly what content they are interacting with. If you use for everything, you are handing a screen reader a blank map. Semantic tags act like a GPS, allowing users with visual impairments to navigate your site efficiently. Before vs. After The difference is clear when comparing structure: Before (Non-Semantic): HTML My Portfolio Home | About | Contact Welcome to my site... After (Semantic): HTML My Portfolio Home About Contact Welcome to my site... Fixing Accessibility Issues During my accessibility audit (Task 2.3), I identified three key areas to improve: Missing alt Attributes: I had images without descriptions. I fixed this by adding context, such as alt="Portrait of Gladwell Muthoni, web development student", ensuring screen readers can describe images to visually impaired users. Lack of Semantic Structure: My initial gallery relied on generic containers. Switching to and tags organized my project list logically, helping assistive technology categorize the content. Heading Hierarchy: I was using tags for visual styling rather than logical structure. I corrected this to follow a strict to hierarchy, which helps screen readers outline the page properly. My portfolios URL https://github.com/gladwellmuthoni/iyf-s11-week-01-gladwellmuthoni.git

Let's be honest — standard GitHub profiles are a bit... static. As a Full Stack Developer & AI/ML Specialist, I wanted a way to showcase my contributions that actually felt alive. I didn't just want a grid of green squares; I wanted a universe. So, I built GitPulse. What is GitPulse? GitPulse is a cinematic, interactive web application that transforms standard GitHub profiles and repository logs into glowing, animated contribution universes. Instead of just seeing numbers, you experience your code history visually. The Tech Stack I wanted this to feel premium, fast, and visually stunning without relying on heavy frontend frameworks if I didn't need to. Canvas API & GSAP: For buttery-smooth micro-animations and physics. Glassmorphism UI: Using CSS backdrop-filters to create a modern, deep aesthetic. Vanilla JavaScript: Keeping the core logic incredibly fast and lightweight. The "Stellar Duel" Feature One of the coolest features I added was the Stellar Duel mode. I thought: What if you could compare your GitHub activity with a friend, but instead of a boring chart, it looked like a sci-fi dashboard? Stellar Duel Using the GitHub API, GitPulse fetches the data and renders a live, side-by-side visual duel of your commit history, stars, and PRs. It’s highly interactive and honestly, just really fun to look at. The Biggest Challenge: Performance Rendering thousands of data points (commits) visually on a canvas can crash a browser if you aren't careful. To solve this, I had to heavily optimize the animation loop. Instead of manipulating the DOM for every star/commit node, I used HTML5 Canvas to batch render the visual elements. I also implemented requestAnimationFrame properly to ensure the animations pause when the user switches tabs, saving CPU cycles. See it in Action I've integrated GitPulse directly into my main portfolio. You can try it live here: GitPulse Live Demo And if you want to see more of the projects I build (especially in the AI/ML and Computer Vision space

— โคลงสี่สุภาพ ว่าด้วยสามภาษาแห่งการสร้างเว็บ — HTML — โครงสร้าง <html> เปิดทางฟ้า ประกาศ <head> ซ่อนนัยน์นาถ นามนี้ <body> ร่างกายปราศ ซึ่งชีวิต ทุกแท็กเปิดปิดที่ หล่อหล่อมความจริง CSS — ความงาม สีสันลอยลิบฟ้า แต่งแต้ม ตัวอักษรเรียงแถม ถ้วนถี่ ขอบเขตเว้นระยะแย้ม เผยโฉม ทุกพิกเซลที่ปรี่ ปรุงแต่งให้งาม JavaScript — ชีวิต เมื่อคลิกนิ้วหนึ่งครั้ง โลดแล่น ฟังก์ชันทำงานแย้ม ยามใช้ if else ตรรกะแจ่ม จักรกล ทุกบรรทัดที่ให้ ชีวิตแก่หน้าเว็บ สามภาษา — หนึ่งเดียว html คือร่างให้ โครงครัน css แต่งแต้มฝัน สวยหรู javascript พลิกผัน ให้เคลื่อนไหว สามภาษาคู่ฟู ฟื้นฟูโลกา — Nokka | มิถุนายน 2569 เชิงอรรถ: โคลงสี่สุภาพบทนี้ใช้ฉันทลักษณ์มาตรฐาน — บทละ 4 บาท บาทละ 2 วรรค วรรคหน้า 5 พยางค์ วรรคหลัง 2 พยางค์ สัมผัสบังคับระหว่างวรรคท้ายของบาทที่ 1, 2, 3 กับวรรคแรกของบาทถัดไป เนื้อหากล่าวถึงสามเทคโนโลยีหลักของการพัฒนาเว็บไซต์ในฐานะ "กาย — ใจ — วิญญาณ" ของทุกหน้าเว็บ

getComputedStyle(element).fontFamily returns the CSS declaration: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif . That's not the font that rendered. It's a priority list. The browser picks the first one that's available and contains a glyph for the character being rendered. For Latin text, this distinction usually doesn't matter — Windows, macOS, and Linux have converged on a small set of common system fonts. For Japanese, it matters enormously. The visual weight, stroke contrast, and letterform style of Hiragino, Yu Gothic, and Noto Sans JP are genuinely different. A site designed on macOS (where Hiragino is the system Japanese font) looks different on Windows (where Yu Gothic is the fallback). Here's how to figure out what's actually rendering, and what I learned building Japanese Font Finder to automate it. Why getComputedStyle Doesn't Answer the Question getComputedStyle(el).fontFamily gives you the cascade result — what the browser received after applying all CSS rules. But it doesn't tell you which entry in the stack was selected. The underlying question is: does this font exist on this system, and does it have a glyph for this specific character? For Japanese, both conditions matter. A font might exist on the system but only cover a subset of kanji (common with CJK fonts that split across multiple files). The browser will use that font for characters it covers, and fall back for others. Canvas-Based Font Detection The classical technique uses a <canvas> element to measure text rendered with each font in the stack: function getFallbackWidth ( canvas , char ) { const ctx = canvas . getContext ( ' 2d ' ); ctx . font = `16px monospace` ; // known-available baseline return ctx . measureText ( char ). width ; } function testFont ( fontName , char ) { const canvas = document . createElement ( ' canvas ' ); const ctx = canvas . getContext ( ' 2d ' ); ctx . font = `16px " ${ fontName } ", monospace` ; return ctx . measureText ( char ). width ; }

Instagram/WhatsApp Stories have a signature UI: those segmented bars across the top, one filling at a time. It looks fancy but it's a simple pattern. Here's a live, tappable rebuild in vanilla JS + CSS. 📸 Try it (tap left/right, hold to pause): https://dev48v.infy.uk/design/day17-instagram-stories.html The segmented bar One bar per story. The rule: only the active segment animates its width 0→100%; segments before it are full, segments after are empty. When the active one completes, advance to the next and reset the rule. Driving the fill A single requestAnimationFrame loop tracks elapsed time vs the per-story duration (~4s) and sets the active bar's width. On completion → next story. The interactions that sell it Tap the right half = next, left half = previous (split the screen into two zones). Press-and-hold = pause ( pointerdown pauses the timer, pointerup resumes) — so users can actually read. Reset past/future segment states whenever you jump. Why rAF over CSS animation A timer loop makes pause/resume and tap-to-skip trivial — you control the clock. Pure CSS animations are harder to interrupt mid-fill. 🔨 Full build (segments → animate active → advance → tap zones → hold-to-pause) on the page: https://dev48v.infy.uk/design/day17-instagram-stories.html Part of DesignFromZero. 🌐 https://dev48v.infy.uk