Kiers Posts - Answer Overflow

Kiers

•Created by Kiers on 7/19/2023 in #front-end

CSS Nesting Conventions

Loved the video on nesting, Kevin - really exciting to see the power that might have. One thing which occurred to me was around the nesting of media queries into other rules:

H1 {
  @media (max-width: 768px) {
    ....
  }
}

H1 {
  @media (max-width: 768px) {
    ....
  }
}

I guess this runs the risk of having your breakpoints repeated throughout your CSS file, meaning a bit F&R job if they need adjusting globally. Is it better to keep breakpoint media queries at the top level, and restrict nesting for local overrides? I did, for a moment, wonder if the media query value could come from a CSS variable - making it possible to define breakpoints once and reuse - but sadly it appears not 😦

11 replies

KPCKevin Powell - Community

•Created by Kiers on 4/10/2023 in #front-end

CSS only menu toggle - is this a good way to approach it?

For years I've used jQuery slideUp/Down/Toggle() for showing menus on mobile devices. However, recently I've started using :has selectors more and that's opening up the possibility to do CSS-only versions: - My menu toggle button becomes a label containing a checkbox (hidden). When you click the label, it checks the checkbox - The menu css has:

.my-menu {
  display: none;
}

body:has(input#menu-toggle[type=checkbox]:checked) .my-menu {
  display: block;
}

.my-menu {
  display: none;
}

body:has(input#menu-toggle[type=checkbox]:checked) .my-menu {
  display: block;
}

Is this a good way to approach it, or should I stick to some javascript anyway as I should be setting aria-expanded etc (which could also drive the CSS)? What other drawbacks might I be missing here?

7 replies

KPCKevin Powell - Community

•Created by Kiers on 2/20/2023 in #front-end

Optional Grid Column Track

Is there a way to have a grid column only included if there's room? https://codepen.io/ascentcreative/pen/XWPXmoQ I have a main content div and sidebar - basic example... - The main grid is grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - The content uses: grid-column: 1 / -2 (locking the right edge to the penultimate column track) - The sidebar uses: grid-column: -2 (doing the opposite of the above) When the screen is too narrow, there's only one, column, so the sidebar drops under. However, it does allow the content and sidebar to be the same width (300px) before that happens. I'd like to be able to make the last column a different width: https://codepen.io/ascentcreative/pen/abaddmO grid-template-colums: repeat(auto-fit, minmax(400, 1fr)) 250px; for example, but that 250px track will always show, meaning the grid-column stuff hols the sidebar in place. So, back to the original question - is there a way to say "only if room"? I tried daft stuff like repeat(minmax(0,1), 250px) which clearly was never going to work... Is this just one where I have to use media-queries to change the columns, or perhaps flex is the better option.

1 replies

Gaming

Programming