menu

Recent posts tagged css

Description for Tag: "css"

Cascading Style Sheets, used to style and layout web pages.
Level UI • 19 hours • in Articles • 9 min read
An MCP server is not a new API. It is a thin layer over the one you already have
Somewhere in the last year, "do we need an MCP server?" joined the list of questions that arrive in a brief before anyone has said what the thing is for. It is usually framed as MCP vs API, as though the Model Context Protocol were a newer kind of AP...
post-cover-33074
  • ai
  • api
  • webdev
  • security
7 Reactions 7 Comments
EmmeKappa23 • 3 days • in Articles • 5 min read
A hash-based CSP has no room for a syntax highlighter
The Content Security Policy on this site allows scripts by SHA-256 hash. Not unsafe-inline, not a nonce, not a wildcard. A list of exact digests, and anything whose bytes don't match one of them does not run. That is the strong version of the policy...
post-cover-32699
  • security
  • astro
  • webdev
  • css
2 Reactions 0 Comments
Chris Rodriguez • 5 days • in Articles • 2 min read
Diagnose scroll snap failures: prerequisites, decision, result, limitation
Prerequisites You should be comfortable with CSS basics overflow, writing modes and know where to edit the scrolling container and its children in your stylesheet. Familiarity with scroll-snap-type, scroll-snap-align, and the difference between phys...
post-cover-32433
  • css
3 Reactions 1 Comments
Anas Sheikh • Oct 22 • in Articles • 3 min read
Your Flex Child Won't Shrink, and overflow: hidden Isn't the Fix (It's min-width: 0)"
You build a dashboard. Sidebar on the left, content on the right, a table or a code block inside. It looks perfect with your sample data. Then a user pastes a long URL into a field, and the whole page grows a horizontal scrollbar. The sidebar gets s...
  • css
  • webdev
  • frontend
  • tailwindcss
0 Reactions 0 Comments
Joemetry • Oct 22 • in Articles • 1 min read
min(), max(), and clamp() Will Replace 80% of Your Media Queries
Writing dozens of @media min-width: ... breakpoints creates rigid, fragmented CSS stylesheets. Modern CSS handles dynamic fluid typography and fluid spacing natively without media queries. CSS / Old Way: Rigid breakpoint hopping / h1 { font-size: 1....
post-cover-30739
  • css
  • frontend
  • responsivedesign
  • webdev
2 Reactions 2 Comments
Figsh • Oct 21 • in Tutorials • 3 min read
FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit(), etc
FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit, and friends From version 1.2.5 FSCSS added a set of property shorthands aimed at everyday layout and chrome—spacing axes, flex stacks, sizing, and aspect boxes—without inventing ...
post-cover-31947
  • fscss
  • css
  • webdev
  • devtools
0 Reactions 0 Comments
aleklabs.dev • Oct 13 • in Articles • 11 min read
A Declarative Naming Layer for the View Transition API
For a long time, I treated interface animation as mostly decorative. It could make a product feel more polished or visually impressive, but I rarely considered it functionally important. In fact, I usually preferred to disable animations wherever p...
post-cover-30964
  • css
  • ux
  • webdev
  • vuejs
4 Reactions 2 Comments
Tom Smithverified • 15 hours • in Articles • 9 min read
Developer Weekly Briefing — October 30, 2026
Security dominated this week, but not in the usual way. Two active campaigns turned GitHub configuration files into attack surfaces. Researchers demonstrated that the built-in browsers inside AI coding tools can read your SSH keys. And at Oracle AI ...
post-cover-33104
  • agenticai
  • devsecops
  • github
  • localai
6 Reactions 3 Comments
Chris Rodriguez • Oct 13 • in Articles • 1 min read
Container queries: prefer the right container-type for the axis you query
Prerequisites Basic familiarity with CSS container queries and the container-type and container-name properties. Ability to inspect DOM and computed styles in the browser devtools. Implementation decision If your rules include block-axis queries ...
post-cover-30906
  • css
0 Reactions 0 Comments
Figsh • Oct 11 • in Tutorials • 4 min read
Build a Pure CSS Radar Chart — Lightweight, Max Performance
Most radar charts pull in SVG path math or a JavaScript charting library. You can skip both. With st-core.fscss, a spider radar chart is: an FSCSS array of scores 0–100 polar coordinates stored as CSS variables --st-sxN, --st-syN shapes drawn wit...
post-cover-30746
  • fscss
  • css
  • performance
  • opensource
0 Reactions 0 Comments
Joemetry • Oct 11 • in Discussions • 1 min read
Stop setting your dark mode background to #000000 and text to #FFFFFF
forumDiscussion group5 participants post-cover-30736
  • css
  • assessibility
  • ui-ux
  • webdevelopment
10 Reactions 10 Comments
Chris Rodriguez • Oct 9 • in Articles • 2 min read
Debugging scroll anchoring when a prepended feed shifts
If a feed prepends new rows while someone is reading older ones, inspect the scroll container before adding JavaScript to adjust its offset. Chromium may already be compensating for the inserted height through scroll anchoring. A transform on the rel...
post-cover-30510
  • css
  • debugging
  • frontend
  • webdev
2 Reactions 0 Comments
raylabs • Oct 7 • in Articles • 3 min read
Halving Codebase Duplication in Static Site Generators
In large-scale static site architectures, especially projects serving thousands of programmatic SEO landing pageshttps://raylabs.app/articles/engineering-high-intent-activity-landing-pages/ such as 2,993 generated routes across duration views and mul...
post-cover-30169
  • developer-tools
  • code-quality
  • astro
  • css
2 Reactions 0 Comments
saan1984 • Oct 4 • in Articles • 1 min read
Animating a 3D Gift Box with WebGPU
What is WebGPU, in one paragraph? WebGPU is a modern browser API that gives JavaScript direct, low-overhead access to your graphics card. It replaces WebGL, which was built mainly for drawing. WebGPU is modeled on native APIs like Vulkan, Metal and ...
post-cover-29724
  • css
  • gpu
3 Reactions 1 Comments
raylabs • Oct 3 • in Articles • 3 min read
FOUC-Proof Retro Design Systems
When building web interfaces with a retro arcade aesthetic, developers often adopt vibrant neon color palettes to recreate an 80s terminal feel. However, applying these bright accents directly across both light and dark surfaces introduces two critic...
post-cover-29604
  • web-design
  • frontend-architecture
  • accessibility
  • css
1 Reactions 0 Comments
Figsh • Sep 30 • in Articles • 1 min read
FSCSS 1.2.5 ships property shorthands: size, px, inset-x, ratio-fit()
A new FSCSS release. This one's aimed at the pairs everyone keeps typing out by hand: / before / width: 32px; height: 32px; / after / size: 32px; Same deal for the other repeat offenders: .card { px: 16px; / padding-left + padding-right /...
post-cover-29321
  • frontend
  • fscss
  • opensource
  • css
0 Reactions 0 Comments
fazal_mansuri_ • Sep 30 • in Articles • 4 min read
🚨 CSS Specificity — The Hidden Reason Your UI Breaks
Most developers learn CSS specificity once. They remember: id > .class > div Then move on. Until one day… Everything looks correct. The CSS is present. The selector is correct. The z-index looks higher. And yet the UI is broken. That’s whe...
  • webdev
  • frontend
  • css
  • learning
4 Reactions 2 Comments
Figsh • Sep 26 • in Articles • 2 min read
FSCSS auto-loop: percentage keyframes
This snippet builds a stepped “processing 0% → 99% → done” animation by looping an array into @keyframes percentages — not a JS timer. Setup 1. npm install -g fscss@latest 2. VS Code: FSCSS language support FSCSS Supporthttps://marketplace.visuals...
post-cover-28689
  • fscss
  • discuss
  • css
  • tutorial
6 Reactions 4 Comments
Level UI • Sep 25 • in Articles • 7 min read
Web design trends 2026: what is worth adopting
Most of the 2026 trend coverage describes a real shift: a reaction against the flawless, interchangeable look that AI-generated design produced at scale. Read the roundups from Figma, Webflow and Wix side by side and the same instinct runs through al...
post-cover-28601
  • webdev
  • frontend
  • css
  • design
8 Reactions 2 Comments
Joemetry • Sep 22 • in Articles • 1 min read
Layout Grids in CSS: Designing with Millimeter Precision Before Writing Code
If you find yourself constantly guessing gap, padding, and margin values in your browser inspect tool, you are likely skipping a fundamental step: establishing a layout grid system before writing layout CSS. In traditional editorial design, grids pr...
post-cover-26517
  • css
  • webdesign
  • frontend
  • ui-ux
0 Reactions 0 Comments
Figsh • Sep 21 • in Articles • 3 min read
How to Use st-core.fscss with Svelte
st-core.fscss draws charts with pure CSS, clip-path polygons plus custom properties, no JS chart library, no SVG, no canvas. Svelte doesn't need to draw anything for it. It just needs to own the data and reactively set --st-p1, --st-p2, and so on whe...
post-cover-27953
  • svelte
  • fscss
  • performance
  • css
2 Reactions 0 Comments
Page:
chevron_left
🔥 93 posts • 👩‍💻 43 active writers
✨ Want to write in this topic?
Share your learning. Get discovered. Build your profile.
Join CoderLegion
💡 Why developers use CoderLegion
Track learning • Share posts • Get ranked publicly
Create your profile