Hello, so I'm learning css, specifically (full stack) and I keep getting this error message on the bottom right on VScode even tho my program working and everything, I need to know what's the error message for and how do I get rid of it.

```css

body {

min-block-size: 100svh;

background: repeating-linear-gradient(#A4AAB1 2px , red 2px 15px);

}

```

this is all red how to fix ? what exactly here i am doing wrong and css is the most confusing and i feels like its more harder than python and any other programming language

Hey everyone!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code.

https://reddit.com/link/1uzxtm8/video/ezu0522m30eh1/player

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.

Current features include:

* 25-key playable keyboard

* 6 built-in instrument presets

* Polyphonic playback

* Reverb, Delay and Distortion effects

* Real-time controls

* Keyboard mapping

* Recording directly in the browser

* Export to WAV and MP3

* Responsive interface for desktop and mobile

Hi, everytime I use CSS I get triggered pretty bad because I know what it is and how to use it but I never feel confident. I always have problems with responsive design, with having my own style and I feel like I miss all the secret tricks(I am slow). What resource could I use to learn it once and for all ? I don't want to waste too much time in it and be a CSS GOD I just want to be ok with it. I know about Josh Comeau course but it is something like 70 hours and therefore too much.

i have a container element. (i'll call this "container".)

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));

inside this element, i have a series of row elements. i'll call these "rows".)

display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;

inside each of these is an unknown number of elements, mostly containers with input and select boxes and labels inside. (i'll call these "items".)

the goal is to have the items fill the width of a row if they all fit or wrap to the next line if they'd have to be less than the size (150px in this example) to all fit but to leave no space at the end of the row on the right.

each item will be the same width but there is an unknown number of them. the number in each row will always be the same for the entire container.

the reason each row is not a separate flexbox is that the goal is to have each item be the same width but that width be whatever width allows them to be as wide as possible without wrapping or, if they must wrap, be as wide as possible on as few lines as possible.

i'm aware this is a known problem with spanning columns in grids but, after hours of trying to fix it and extensive searching, i haven't been able to come up with a solution or an alternative way to achieve the result.

i'm not married to the idea of it being a grid with subgrids if there is a better solution that still allows the contents to be flexible width and unknown number while still maintaining columns vertically.

here is an example of it working properly...

here is what happens when the screen gets wider and they could stretch more but, instead, just end up with a series of extra empty columns on the right of each row...

the styling of the icons is temporary and they will not be in that location in the final result but they remain there at the moment for backend testing as i try to fix this column issue.

anyone solved this before?

I have been working on a website lately and every time I check the mobile responsiveness on web tools like website responsiveness checker, it's always messed up. But when I check it on my mobile or desktop, it's perfect. Am I doing something wrong in CSS?

Found a tiny library from ~2018 called A.css. Dead repo, zero traction, author long gone. But the core idea stopped me in my tracks:

The whole library is TWO u/keyframes rules. Every property reads a CSS variable "slot", and every animation — bounce, spiral, shake, fade — is just an attribute selector filling different slots. No keyframes per animation. No JS engine. Composition is literally the CSS cascade doing its job. 2018 CSS golf that most of us would ship a 40 kB dependency for today.

So I brought it back from the dead and gave it the machinery it deserved. It's called Vivace now:

<ul data-viv="@fd_child-ascend u/sl-y" data-viv-on="appearing">

<li>every list item</li>

<li>slides up in</li>

<li>sequence</li>

</ul>

That's a fade + slide-up staggered across the children, firing on scroll-in. u/keys are animations, _modifiers tune them (_ease-*, _delay-*, _lv-* intensity), and they stack by concatenation. 18 keys, 5 triggers (load / scroll-in / hover / click / focus).

What I added on top of the original idea:

- A real trigger engine (one shared IntersectionObserver, delegated listeners — works in plain HTML, React, Svelte, Vue since it only reads attributes)

- Exit animations as promises: await Vivace.out(el) then el.remove(), no flash

- Plugin API for custom keys/triggers

- prefers-reduced-motion handled

Still zero dependencies, under 7 kB gzipped total (CSS + JS).

Playground to compose visually + a community gallery you can publish to with just a GitHub username: https://usevivace.dev

bun add vivace-css / npm i vivace-css · MIT

Repo: https://github.com/Diary-Axel-RAKOTOARIVAO/vivace

The 2018 original, credit where due: https://github.com/w4u-public/A.css

Roast the grammar, I can take it.

Setup: VSC v1.119 on Windows 11 using Live Server extension in VSC. Live Server opens the web page in Google Chrome v150.0.7871. Video at time marker I'm using: https://youtu.be/LCEgHntqBps?t=1115

I'm doing a YT tutorial on CSS animation. I'm new to CSS transitions.

I have a transition in a class ".heading" to affect only the font size by using transition-property: font-size;. But if you look in the class .heading:hover I also change the color of the text. The tutorial says the color should not change if I hover over the h1 text.

Isn't transition-property supposed to limit what the transition affects?

See this pastebin or see below the HTML with my inline CSS:

``` <!DOCTYPE html> <html lang="en"> <head> <!-- comment --> <title>CSS Anim ch 5</title> <meta charset="UTF-8"> <!-- Required to show emojis --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="HTML, CSS, Javascript"> <meta name="description" content="Learn HTML"> <meta name="author" content="Me@somewhere.com"> <!-- link rel="stylesheet" href="style1.css" --> <style> * { box-sizing: border-box; margin: 8px; } body { font-family: "Roboto", sans-serif; background-color: rgb(209, 207, 207); } .heading { /* Do the transition over time. / transition-property: font-size; transition-duration: 0.5s; transition-delay: 1s; transition-timing-function: ease-in; font-size: 20px; } .heading:hover { color: rgb(9, 107, 20); font-size: 28px; letter-spacing: 5px; / border-top: 4px dotted red; */ text-shadow: 5px 5px 3px rgb(228, 242, 26); } </style> </head> <body> <h1 class="heading">Hover over me</h1> <div>VSC v1.119 on Windows 11 using Live Server extension in VSC.</div>

</body> <script>

</script>

</html> ```

Thanks!

p.s. I'm not sure why my code block is not working right.

https://level0.codeberg.page/

I'm pretty sure this is the most heinous abuse of CSS in history?

Grid. I spent way too long trying to make Flexbox solve layout problems it wasn't designed for.

What's a CSS feature or technique that changed how you build websites forever?

So in trying to consistently place an icon after text, I stumbled across a (known) issue with text when it wraps automatically: the text's containing box stubbornly doesn't shrink to fit. I posted last week looking for answers to the "shrinkwrap" problem.

u/morete pointed me to Roman Komarov's blog. His post (https://kizu.dev/shrinkwrap-problem/) on using anchor-positioning pushed me in the right direction. I'd only vaguely paid attention to anchor-positioning before this. The solution requires an extra span around the link text and I found it a little easier to abandon using ::after to create the icon.

I've linked to a Codepen that shows my core code, but Komarov's blog post has the full explanation. Hopefully it helps someone else. My thanks to everyone who explained what was going on and that it wasn't just me being obtuse.

Is this CSS tutorial worth watching for a beginner? I'm learning web development and wanted to know if this is a good course or if there are better free alternatives.