https://codepen.io/The_caeruleus_Mantis/pen/KKOpZXm

Since the release of Next.js 15, I keep encountering this warning. Does anyone know a solution?

Error example:
Sass u/import rules are deprecated and will be removed in Dart Sass 3.0.0.

typescriptCopy code5 | u/import '../typography.scss';

styles\config\index.scss 6:9  @use  
styles\global.scss 1:1        root stylesheet

I'm using Sass with multiple files. Here's how my config.scss file looks:

@import '../variables.scss';  
@import '../theme.scss';  
@import '../mixins.scss';  
@import '../animations.scss';  
@import '../typography.scss';  
@import '../common/atomic.scss';  

In global.scss, I include it like this, on the top of the file:

@use './config/index.scss' as *;

How do you handle multiple SCSS/CSS files?
I'd be really grateful if someone could help.
Thanks in advance!

Hi there. I'm using flexbox to have a list of titles with a button on the right and a divider line in between. It works except for one issue - if the text on the left is too long it forces it to a new line, which is fine, but that flex item ends up larger than it should be, meaning my divider doesn't get to show. I have tried everything I can think of to get it to behave but it won't. width: min-content ends up forcing each word on a new line so that isn't the answer either. Any help would be appreciated. Note this is not the full context of what I'm doing. I don't do this on mobile. This is just an example that captures the issue I'm experiencing with long titles on narrow desktop. Codepen: https://codepen.io/mind_patterns/pen/gbYvyeZ

https://preview.redd.it/eibph1mmn2ce1.png?width=548&format=png&auto=webp&s=9a547a3c291406e545c22a614718e52e99511489

Is there some CSS trick which would allow markup such as:

<h5>Lorem Ipsum</h5>
<p>Pellentesque at aliquam enim, a facilisis dolor. Donec feugiat
accumsan.

to be styled with an ‘inline’ heading. What LaTeX calls a paragraph. I.e. to get formatting such as:

<p><strong>Lorem Ipsum</strong>. Pellentesque at aliquam enim,
a facilisis dolor. Donec feugiat accumsan.

I could put h5 inside of p but that’s technically an invalid markup, I guess?

I know about role and aria-level, but that’s less ‘natural’ markup hence why I’m pondering existence of some black magic which would make it work with h5.

For the life of me I just can't understand the difference. I get one overwrites all things within the document but I would like a reason for it's use. If I can just use the body element every time why even use * ?

Recently trying to make a border style animation but for some reason the psuedo class background is appearing on top of the main-background even with the z-index
```

.about-me-content{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: auto;
    flex: 1 1 0;
    max-width: 700px;
    position: relative;
    z-index: 0;
    background-color: #e84393;
}
.about-me-content::after{
    content: '';
    position: absolute;
    background: green;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    translate: -50% -50%;
    z-index: -1;
}

 ```
 <div class="about-me-content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero cupiditate debitis distinctio, nisi iusto facere accusamus vel. Aliquam incidunt molestias maiores perspiciatis doloremque, vel debitis ea tempore accusantium nisi!</p>
                </div>

https://preview.redd.it/ia6hswmbkzbe1.jpg?width=884&format=pjpg&auto=webp&s=10d690e1420567d73e47e1be538ab55f6f114715

I've seen these kind of vertical lines in a lot of modern website designs. But I don't know how to write it so it always stay in background even when scrolling. May I get some help on that ?

This is the website from the screenshot - https://riadmammadov.com/

https://preview.redd.it/jg0xw91hwxbe1.png?width=1920&format=png&auto=webp&s=27d900c40d8dfa99dd3c8ca2e457146c538317a4

hello how to do this pixelate effect surrounded the text in large size as in the photo

Is it possible to achieve this kind of layout using a CSS grid and five divs?

https://preview.redd.it/k8thyr1d8vbe1.png?width=932&format=png&auto=webp&s=1567c41b74e30291c3995adca82fb10e04679782

I am playing around with CSS anchor positioning at work and for the life of me, cannot figure out why the custom fallback positioning is not applying.

I’ve defined an anchor, positioned the target around said anchor, and am now attempting to deal with horizontal overflow by defining fallback positions.

In Chrome dev tools, it just has a strike-through, indicating that the fallback isn’t working. All the fallback position that I’ve created does is set the target’s width to an absurdly small value of 10px, so it should have more than enough space to fit on the page when the component overflows.

Has anyone run into this issue? I suspected that there was another rule overriding this, but in the computed styles section of my dev tools, it looks like it is supposed to apply.

Thanks in advance.

Hi! i have been trying to create a text-reveal effect which colours the text but their is space between my content and it does not smoothly fill the second part or content after space and when it finishes the color just snaps in their.. any way on how to fix it?

```

.name-heading h1{
    position: relative;
    color: transparent;
    -webkit-text-stroke: 1px green;
}
.name-heading h1::before{
    content: 'Yaseen Rehan';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    color: #4cd137;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    animation: name-heading 6s linear infinite;
}

  <div>
            <div class="name-heading">
                <h1 class="no-margin">Yaseen Rehan</h1>
            </div>
            

        </div>

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Cascade</title>
  <link rel="stylesheet" href="./style.css">
  <style>
div.box.inner-box{
color: white;
background-color: red;
}
/* .white-text{
color: white;
} */
  </style>
</head>

<body>
  <div id="outer-box" class="box" style="background-color: purple;">
<div class="box" >
<p>Yellow Text</p>
<div class="box inner-box">
<p class="white-text">White Text</p>
</div>
</div>
<div class="box">
<p>Yellow Text</p>
<div class="box inner-box">
<p class="white-text">White Text</p>
</div>
</div>
  </div>
</body>

</html>

style.css

/* Don't change the existing CSS. */

.box {
  background-color: blue;
  padding: 10px;
}

p {
  color: yellow;
  margin: 0;
  padding: 0;
}

why am i seeing the <p>white text</p> as yellow still, internally declared css rule wouldn't it override color declared in external style.css 
https://ibb.co/zbm0q5H

mine & how should it look: 
https://ibb.co/bRbYqb0

How to add a Dropdown menu to one div?

Solved

Check out VanillaHTML and VanillaHTML Github

Hi, I’m Bijan!

I’ve been creating websites as a hobby for quite a while now, and professionally for a little over four years now.

In that time I’ve noticed one thing that never seems to change despite everything in tech ALWAYS changing, and that’s how ugly regular HTML looks.

I write about this project in detail on my portfolio but here’s what it is and why I made it!

What VanillaHTML Is and Isn’t

Let’s be real, default HTML is an ugly duckling. You hate to look at it, but you also know how much potential it really has with the right CSS.

VanillaHTML is a CSS file that allows for regular HTML to look and feel much more modern. But it also enforces the use of Semantic HTML. This means that if you are building your HTML to meet accessibility you will want to make sure you are using HTML elements that tell the browser what the element on your website does.

This is not intended to replace design or CSS in any way. If you are building websites for businesses then you should be designing and working with CSS. However, you can use it as a starting point for any project. By default there are no classnames, all the CSS is applied directly to the semantic element, so you can easily add classes to your html for your custom design, or remove and add what you do or don’t like from the file.

By enforcing these Semantic HTML practices as you build a website, you develop good habits and practices as a web developer. It not only makes building easier, but it also makes the internet better.

Why I Made VanillaHTML

I wanted to create an experience where learning HTML felt more modern, fun, and more effective. I wanted the visual aspect of building a basic HTML website to make it clear what exactly your HTML is doing.

I also wanted to highlight the importance of accessibility and how powerful default HTML can actually be and how much value these semantic elements provide.

Hello, I was wondering if we know whether this behaviour will be changed in the future as it's pretty annoying. When I replace part of the page while using the new View Transitions API, not only the replaced content but the whole page freezes meaning user can not interact with buttons, scroll etc.

https://preview.redd.it/mbibslpu3mbe1.png?width=1920&format=png&auto=webp&s=c7f73c9bc0879490bfc19a7d5a33418ca7409eb5

How do the sections look? This is the employer landing page for my project "HireSpot," which I'm building for my portfolio as part of my junior web developer role application. I'm not very strong when it comes to UI/UX because I'm more of a backend developer with experience in Python, Django Framework, and Django Rest Framework.

If you have any feedback or advice for me, I would be very grateful. Thank you.

Hello,

Hopefully someone can quickly point me in the right direction, and explain why? I've tried googling but it's not the easiest thing to google.

This markup example hopefully explains what I'm trying to do:

<div style="padding:20px;">
    <h1 style="margin-bottom:10px;">Heading</h1>
    <p style="margin-bottom:10px;">Standard paragraph</p>
    <p style="margin-bottom:10px;">Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

There appears to be a few ways of achieving the above. I've noticed libraries like radix use flex/grid and have 0 margin & padding on all tags. While libraries like mantine favour margin & :last-child, where all h1, p tags etc have margin and also rely on them colapsing. I'll give examples below.

Example 1 - Flex

<div style="padding:20px; display:flex; flex-direction:column; gap:10px;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

Example 2 - Grid

<div style="padding:20px; display:grid; grid-column:1; gap:1.5rem;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

Example 3 - Margin

<style>
    .container p:last-child {
        margin-bottom:0;
    }
</style>
<div class="container" style="padding:20px;">
    <h1>Heading</h1>
    <p>Standard paragraph</p>
    <p>Another standard paragraph</p>
    <p>This tag however, should have no margin bottom so that the padding from the container can be used instead.</p>
</div>

What are the pros and cons of the above so I can better decide which to adopt myself? And which method do you personally use and why?

Thanks in advance for any help.

P.S. I've used the Radix UI Theme, but really hated the way they did sizing in pixels (rather than em/rem) and then to make it worse, the size properties just seemed like random numbers (amongst other issues). So I moved to Mantine, but now while they use rem/em, they do this margin approach to spacing consecutive elements. I keep finding I'm removing the margins in components more than I use the margins. Which then got me here.

Hello, I am currently trying to learn CSS and I was trying to make a drop-up menu and ran across couple of issues. For some reason menu content is slightly bigger than my button. I tried couple of things that I could think of and now I'm just stuck why is it this way?

https://preview.redd.it/qstsqg56tgbe1.png?width=491&format=png&auto=webp&s=d096f0c6dbc13698e6884001349c8e2b52091f26

This was my first question. And another one is - is there any way to make my content appear smoothly? I was trying to use transition, but it seems not to work with how my code is written? I didn't use JS because I know very little about it (probably will learn it later) and was trying to find some work around.

Here's entire HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Drop-Up Menu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .dropup {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            background-color: white;
            color: purple;
            border: 2px solid purple;
            padding: 0.6em 1.2em;
            font-size: 1em;
            border-radius: 1.25em;
            transition: 0.2s;
        }

        .dropup-content {
            display: none;
            position: absolute;
            bottom: 100%;
            background-color: white;
            width: 100%;
            border: 2px solid purple;
            border-top-left-radius: 0.625em;
            border-top-right-radius: 0.625em;
            border-bottom: none;
        }

        .dropup-content a {
            color: black;
            padding: 0.75em 1em;
            text-decoration: none;
            display: block;
        }

        .dropup-content a:first-child {
            border-top-left-radius: 0.625em;
            border-top-right-radius: 0.625em;
        }

        .dropup-content a:hover {
            background-color: #f1f1f1;
        }

        .dropup:hover .dropup-content {
            display: flex;
            flex-direction: column;
        }

        .dropup:hover .dropbtn {
            background-color: #f1f1f1;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-top: none;
        }
    </style>
</head>

<body>
    <div class="dropup">
        <button class="dropbtn">Get in Touch</button>
        <div class="dropup-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>

</html>

Would appreciate any help! Many thanks!a

P.S. there certainly are mistakes and some stuff that can be improved in this code, but as I said I'm just learning still :)

Do you guys mostly use rems? or pixels? what about vh and vw? percentages? ems maybe? what about media queries? what units for them? I would like to see an answer formatted like this, would be appreciated.

padding and margin: rems
width and height: ems
font-size: pixels
etc etc

https://preview.redd.it/dsypz8xz1gbe1.png?width=538&format=png&auto=webp&s=7861110f262baec1043cffd9d893904dd8f21561

Does anyone know why when i remove display: grid code from css stylesheet that line under the arrow icon goes away ? it was never there on the fontawesome image i took the code from. I dont want that line.

Link to Code Via Github (new to this XD):

https://github.com/afolliet/Google_Homepage.git

Two days ago I started to learn css by a youtube video and today I finished it (video was not very long tbh), after completing it I thought to make a login Page and ended up making this one without any reference so on a scale of 1 to 10 how much would you rate it and what are the fixes that can make this a good one? Your feedback and suggestions will help me a lot to improve myself.

Hey everyone i make many projects on frontend but whenever i write css by own i stuck and confused how the css position and flex box like i know basic things about css. So please me guys

Could someone help me understand why the bar " I " between the date and the read time disappears on mobile?

https://realworldinvestor.com/how-to-become-an-investor/