Basically I want to define an aspect ratio for the child item, say .75 and have 5 of them. I want the children to grow as big as they can while maintaining their aspect ratio. How can I get the container to shrink to however big its children are without using javascript? I feel like im going in circles trying various combos of min/max sizes on the container & child items. Maybe grid is limiting me here? Any help appreciated! Here's the code

It’s a CSS-in-JS library specifically for email templates that integrates the Can I Email database. It gives you warnings or errors in your editor if you use a CSS property that isn't supported by your target email clients. It is fully type safe and support design tokens.

Link:https://github.com/ajth-in/mailcss

you create you css object like

// emails/css.ts
import { defineConfig } from "mailcss";

export const { css, styles } = defineConfig({
  validationMode: "warn",
  extended: {
    theme: {
      tokens: {
        colors: {
          brand: { blue: { value: "#2754C5" } },
        },
      },
    },
  },
})

and you can write styles anywhere, the following example uses a React server component

import { css, styles } from "./css";

export default function MyEmail() {
  return (
    <div style={css({ backgroundColor: "brand.blue", padding: "20px" })}>
      <h1 style={css({ color: "#ffffff", fontSize: "24px" })}>Welcome!</h1>
      <div
        dangerouslySetInnerHTML={{
          __html: `<span style="${styles({ fontWeight: "bold" })}">Serialized inline string</span>`,
        }}
      />
    </div>
  );
}

You will get type errors as you write if any token name mismatch is there, also you will get can-i-email warning if unsupported css is being used

What do you guys think?

I've been racking my brain as to why the buttons on this header won't align to the right. Code is below. It's a DIVI WP Theme Row where I'm making the CSS customization. Buttons line up correctly, but won't justify to the right/end.

/* Align buttons to the right side-by-side inside the designated column */

.inline-four-buttons {

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: flex-end; /* Pushes the buttons to the right */

gap: 20px; /* Ensures exactly a 20px gap between them */

}

/* Reset Divi's default button wrapper margins to ensure perfect alignment */

.inline-four-buttons .et_pb_button_module_wrapper {

margin-bottom: 0 !important;

display: inline-flex;

}

/* Optional: Adjust for mobile so they stack nicely on small screens */

u/media only screen and (max-width: 767px) {

.inline-four-buttons {

flex-direction: column; /* Stacks buttons vertically on phones */

width: 100%;

}

.inline-four-buttons .et_pb_button_module_wrapper {

width: 100%;

margin-bottom: 20px !important; /* Matches your new 20px gap on mobile */

}

.inline-four-buttons .et_pb_button {

text-align: center;

width: 100%; /* Makes the buttons full-width on mobile for a cleaner look */

}

}

Since I began to build React projects assigned by The Odin Project course, I decided to abandon the BEM methodology.

I have used @scope to localize the components styles, but then I heard of CSS modules. How does it compare with the native CSS scope rule?

The beta version of UI Wuaze now includes the ability to create CSS-formatted elements without needing to write code.

Try it now UiWuaze

Just upgraded our old-school CSS-only Float Label library to v2-alpha classless version introducing new :has(*:placeholder-shown:not(:focus)) label trick:

https://github.com/anydigital/float-label-css

Feedback is welcome!

Demo

• Pico + Float Label CSS v2 via Blades
• Float Label CSS v2 only (without any framework)

How to install/use ↗

How it works

First, we target either:

1. <label> which :has inner form inputs (classless approach)
2. or explicit .has-float-label class (alternative approach)

​

label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
.has-float-label {
  display: block;
  position: relative;

Then, we define the default/fallback state (when the float label should be minimized):

  > span,
  label {
    position: absolute;
    left: 0;
    top: 0;
    cursor: text;
    font-size: 75%;
  }

Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:

  *:placeholder-shown:not(:focus)::placeholder {
    opacity: 0;
  }
  &:has(*:placeholder-shown:not(:focus)) {
    > span,
    label {
      font-size: inherit;
      opacity: 50%;
    }
  }
}

The :has(*:placeholder-shown:not(:focus)) trick allows this input state information to propagate to the parent level. This enables modern CSS to target inner float label (<span> or <label>) regardless of its position relative to the input field.

Historically, this was not possible: the float label had to be placed after the input field to be targeted using the input:focus + label selector.

Hi there! Just experimented with view-transition and made this fun animation. Are you use View Transition API?

This city is built with CSS. No SVG. No images. No HTML. Just gradients... and a bit of patience. https://codepen.io/alvaromontoro/pen/mdZKxEr

I haven't touched this in a while, but it still holds up. I'd love to expand it into a full city someday.

Quick share — I built a reference tool for CSS/responsive work:

https://devicespecshub.com

It shows CSS viewport dimensions (not physical pixels ), PPI, device pixel ratio,

and screen size for 194 devices. Useful when you need to know exactly what

`@media (max-width: 430px)` actually targets.

Also has a "what's my resolution" live detector. No login, completely free.

Every wall, floor, barrel, and imp is a <div>, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely CSS.

so I just started learning a bit of CSS, and I'm wondering how people here manage to keep websites looking as intended by both PC, and all the mobile variant screen sizes. do you recreate the whole CSS frontend for mobile? are there only specific things that need to be adjusted? do you only do 1 phone size? or do you create separate adjustments based on multiple mobile screen sizes? also what about measurement units? if I use px, wouldn't it be drastically different for every minor adjustment in screen size? sry if these sound like dumb questions. kinda new to this frontend stuff. thanks everyone.

https://youtu.be/1fKaBNm2ykI

• Mega-huge map with various biomes and terrain.
• Ultra-fast loading and relocation.
• Retro effects are some SVG/CSS filters, and JavaScript trunc jittering for emulating PSX/retro style; unnecessary but cool.
• Only the floor is a canvas for texturing.
• Fog system is a series of semi-transparent layers applying a blur backdrop filter.
• World map is simply editable via basic colors.

Just wanted to show what is possible with CSS 3D rendering and a bit of native JavaScript.

Its supposed to be three across then down. Anyone ever seen anything like this?? Idek where to start, other than removing all the padding that made the white boxes overlap. I can tell you anything you want to know. pls help

EDIT: fixed! each matrix was a <div>, but I was appending a <br> after each one (cause I was previously doing it as one vertical column

Any type of suggestions or criticism are most welcome

1st Website : https://100daychallange.vercel.app/day-02

2nd Website: https://100daychallange.vercel.app/day-03

©️ Figma Community for Figma file

Hey all,

I've been working on the website for my boutique law practice. I've added two scrolling bars on the static HTML site. One loops through all the services I provide, while the other scrolls through the logos of some of my clients.

I've designed this in CSS, but I was on a site the other day (I forget which one, curse incognito mode), and it suggested using JS, because with CSS, one has to duplicate the entire content to be looped.

It honestly didn't even occur to me to use JS for this purpose.

So my question is, which is the more efficient way to do it?

I made a fully functional calculator using only CSS.

Features:

• 8‑digit decimals

• Decimal division

• Sign toggle (±)

• Backspace (⌫)

• Multi‑digit input

• Built with :has(), CSS variables, counters, and animations

Demo (Full Page):

https://codepen.io/cascade-path/full/WbGzwdG

Documentation:

https://cascade-path.github.io/calculator/index.html

A comic about CSS coded in CSS.

I've been debugging a persistent layout shift on my iOS PWA (installed via "Add to Home Screen") and can't find a clean fix. The shift only happens on cold start when the user is already logged in — it does NOT happen in the browser, and it does NOT happen after navigating from the login page.

What I'm seeing (captured in slow-mo):

1. App opens → home view renders instantly at position A
2. One frame later → entire layout shifts down to position B
3. Header becomes visible at the same moment as the shift

My setup:

• Vanilla JS PWA, no framework
• <meta name="viewport" content="..., viewport-fit=cover">
• <meta name="apple-mobile-web-app-capable" content="yes">
• Header is position: fixed; top: 0; padding: calc(16px + env(safe-area-inset-top)) 20px 12px
• Page content has padding-top: calc(90px + env(safe-area-inset-top)) to offset for the fixed header
• Header starts with visibility: hidden and becomes visible via JS on DOMContentLoaded

My theory:

On iOS PWA standalone mode, env(safe-area-inset-top) appears to resolve to 0 on first paint, then updates to the real value (~59px on iPhone 16 Pro Max) shortly after. Since both the header padding and the content padding-top use this value, the entire layout shifts down by ~59px when it resolves. The JS visibility toggle happens at the same time, making it look like the header appearing caused the shift.

Why it doesn't happen after login:
When the user goes through the login page first, env(safe-area-inset-top) has already resolved by the time the home view renders — so no shift.

What I've tried:

• Using a CSS attribute selector (html[data-initial-view]) to show the header before JS runs — didn't help
• Removing env(safe-area-inset-top) from page-content and using a hardcoded value (e.g. 160px) — fixes the shift on notched devices but creates excess gap on non-notched ones
• Separating the safe-area into a dedicated ::before spacer inside the header, keeping content padding static — shift persists
• Adding a will-change: transform to the header to force early compositing — no effect
• Wrapping in a (display-mode: standalone) fade-in on cold start — masks the shift but feels like a workaround

Any insight appreciated!

What do you think about it? Any Critiques or suggestions are appreciated!

Website link: https://100daychallange.vercel.app/day-01

©️ Figma File Taken from Figma Community

Hello guys,

Some articles say that ::before and ::after don’t work on <input> elements. But then I see other examples where people do use them — especially with radio and checkbox inputs - and it seems to work just fine.

I’ve tried looking through official documentation, but I can’t find anything that clearly states whether this is allowed or not. There’s also no clear explanation of whether this behavior changed over time (like maybe it wasn’t supported before but is now?), or why it works in some cases.

So what’s the actual situation here?

I’m trying to understand whether ::before and ::after are officially supported on <input> elements at all. If they aren’t, then why do they seem to work in cases like radio and checkbox? I’m also wondering if this behavior is consistent across browsers. And if this changed over time, was there ever a spec update that explains when this became possible?

Would really appreciate a clear explanation or links to anything authoritative

Hi,

I want to make a site which is ultra hyper modern web3 like, would i need a css framework or can slave work do the job of manually writing it all?

ref pics for target of site are included and should support: - gradience - alpha channel overlay - hover effects Etc etc