### Complete HTML Example with Multiple Cards Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways This is a full HTML example demonstrating the card layout with multiple articles, each featuring a responsive background image. ```html

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart
``` -------------------------------- ### HTML Headings Example Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale Displays example HTML headings to visualize the generated font sizes. ```html

h1: Almost before we knew it, we had left the ground.

h2: Almost before we knew it, we had left the ground.

h3: Almost before we knew it, we had left the ground.

h4: Almost before we knew it, we had left the ground.

``` -------------------------------- ### Navigation Quantity and Style Queries Example Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture A consolidated example demonstrating the use of :has() for quantity queries and nested container queries with style conditions to control navigation menu display. ```css .navigation__menu:has(:nth-child(6)) { --show-menu: true; } @container menu (40ch <= inline-size <= 60ch) { @container not style(--show-menu: true) { .navigation__menu button { display: none; } .navigation__menu ul { display: flex; } } } ``` -------------------------------- ### Basic Grid Container Setup Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox Initializes a grid container with a defined gap. This is the foundational step for applying grid layout. ```css .grid { display: grid; gap: 1rem; } ``` -------------------------------- ### Combined Pagination Style Query Example Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture This example combines the custom property definition and the nested container style query for the pagination component, demonstrating a complete implementation. ```css .pagination-container:has(li:nth-child(11)) { --show-label: true; } @container (min-width: 40ch) { @container style(--show-label: true) { .pagination-list { display: none; } .pagination-label { display: block; } } } ``` -------------------------------- ### HTML Structure for Grid Examples Source: https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert Provides the HTML markup for demonstrating grid auto-flow, centering, and responsive columns. ```html
Centered
1 2 3
``` -------------------------------- ### Define a Layer Order for Project Styles Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture This example shows a common pattern for defining a sequence of cascade layers in a project, from reset to utilities and states. ```css @layer reset, theme, global, layout, components, utilities, states; ``` -------------------------------- ### Example Font Sizes Generated Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale Illustrates the resulting font sizes for h1-h4 based on a 'perfectFourth' ratio (1.333). ```text h4: 1.333rem h3: 1.776889rem h2: 2.368593037rem h1: 3.1573345183rem ``` -------------------------------- ### Basic CSS Style Query Example Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture Demonstrates the syntax for a CSS style query, targeting children of a container based on a custom property's value. ```css @container style(--my-property: true) { /* Styles for the container's children */ } ``` -------------------------------- ### Variable Width Columns with Flexbox Example Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox Demonstrates variable width columns using a combination of fixed and auto flex-basis, with a custom minimum width. ```html ``` -------------------------------- ### Deconstructed Pancake Flexbox Setup Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox Sets up a flex container with items that wrap based on a minimum flex-basis. Useful for uniform item breakpoints. ```css :root { --pancake-min: 20ch; } .flex-pancake { display: flex; flex-wrap: wrap; margin: 1rem -0.5rem; > * { flex: 1 1 var(--pancake-min); margin: 0.5rem; } } ``` -------------------------------- ### Example HTML with Multiple Cards Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways This HTML demonstrates the card structure within a main section and a card row, showcasing multiple instances of the card component with different images. ```html
Preview of Whizzbang Widget

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart
Preview of Whizzbang Widget

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart
Preview of Whizzbang Widget

Whizzbang Widget SuperDeluxe

Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon pie sesame snaps jelly-o.

Add to Cart
``` -------------------------------- ### HTML Structure for Button Examples Source: https://moderncss.dev/css-button-styling-guide Demonstrates various button and link elements styled as buttons, including default, small, and block variations, within different container structures. ```html
Button Link Button Link
Share Learn More
✨ Share on MySpace

Card

A card of wonders.

Magic
``` -------------------------------- ### Bootstrap Example: Three Equal Columns Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox Illustrates a common pattern using Bootstrap's grid system to create equal-width columns that adjust based on viewport size. ```html
One of three columns
One of three columns
One of three columns
``` -------------------------------- ### Consolidated Card Stateful Styles Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture A combined example demonstrating styles for card focus, link focus, and link hover states using modern CSS selectors. ```css .card:focus-within { outline: 3px solid #b77ad0; outline-offset: -6px; } .card a:is(:focus, :focus-visible) { outline: 1px solid transparent; } .card a:is(:hover, :focus-visible) { text-decoration: underline; } ``` -------------------------------- ### Navigation Grid Layout Setup Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture Sets up the navigation wrapper using CSS grid, allowing for flexible column sizing. The '1fr' for the menu area enables it to take up available space, crucial for container queries. ```css .navigation { display: grid; grid-template-columns: auto 1fr auto; } ``` -------------------------------- ### Basic Container Query Setup Source: https://moderncss.dev/container-query-units-and-fluid-typography Define a container with `container-type: inline-size` to enable querying its inline dimension. Child elements can then apply styles based on the container's size using `@container` rules. ```css .container { container-type: inline-size; } @container (inline-size > 300px) { .container .child { padding: 2rem; } } ``` -------------------------------- ### CSS Nesting Examples Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture Demonstrates various valid CSS nesting rules including direct children, attribute selectors, and pseudo-classes/elements. Use this for structuring styles within components. ```css .my-element { a { } & a { } :is(a, button) { } .button { } [data-type] { } + .another-element { } } ``` ```css .my-element { [data-type] { } &[data-type] { } } /* Results in: */ .my-element [data-type] { } .my-element[data-type] { } ``` ```css .my-element { &::before { } &:hover { } } ``` -------------------------------- ### Using currentColor as initial-value for @property Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property This example shows how to set 'currentColor' as the initial value for a custom property, which is an exception to the computationally independent rule. ```css @property --border-color { syntax: ""; inherits: false; initial-value: currentColor; } h2 { color: blue; border: 3px solid var(--border-color); } ``` -------------------------------- ### Pagination Style Query Setup Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture Define a custom property '--show-label' on the pagination container when it has more than 10 list items, acting as a toggle for conditional styling. ```css .pagination-container:has(li:nth-child(11)) { --show-label: true; } ``` -------------------------------- ### CSS Cascade Example Source: https://moderncss.dev/how-custom-property-values-are-computed Demonstrates how specificity and cascade order determine the cascaded value for a property when multiple rules apply to the same element. ```css body { color: #222; } h2 { color: #74e; } .card__title { color: #93b; } ``` -------------------------------- ### HTML Structure for Flexbox and Grid Demos Source: https://moderncss.dev/equal-height-elements-flexbox-vs-grid This HTML demonstrates the structure for both flexbox and grid layouts, including examples with a fixed number of columns per row (`col-3`). ```html

Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

flexbox col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

grid col-3: Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

Muffin ice cream gummi bears. Sweet apple pie cake candy topping carrot cake. Candy soufflé lemon drops bonbon.

Soufflé tart pie lemon drops gummi bears lollipop dessert sesame snaps. Tiramisu powder pudding. Cake cheesecake pastry caramels tiramisu.

``` -------------------------------- ### CSS Cascade Fallback Example Source: https://moderncss.dev/how-custom-property-values-are-computed Demonstrates how invalid property assignments fall back to cascaded values when applicable. ```css /* Used due to the cascade */ p { color: blue } /* Invalid as a "color", thrown out by the browser */ .card p { color: #notacolor; } ``` -------------------------------- ### HTML Structure for Multiple Select Source: https://moderncss.dev/custom-select-styles-with-pure-css Example HTML for a multiple select input, including the 'multiple' attribute and a custom class for styling. ```html
``` -------------------------------- ### HTML Structure for Buttons and Icon Buttons Source: https://moderncss.dev/icon-button-css-styling-guide Demonstrates the HTML structure for various button types, including standard buttons, small buttons, real buttons, and icon-only buttons. These examples showcase the use of 'a' tags and 'button' elements with specific classes. ```HTML
Button Link
Button Link
``` -------------------------------- ### CSS @property for Theming with Style Queries Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property This example shows how @property can be used to define a theme property with a specific syntax and initial value. It then demonstrates using a container style query to apply styles based on the theme's value. ```css @property --theme { syntax: "light | dark"; inherits: true; initial-value: light; } :root { --theme: dark; } @container style(--theme: dark) { body { background-color: black; color: white; } } ``` -------------------------------- ### Opt-in to Browser UI Adaptation with color-scheme Source: https://moderncss.dev/12-modern-css-one-line-upgrades Allows the browser to adapt UI elements like form controls and scrollbars to a light or dark theme. This example prefers a dark theme. ```css :root { color-scheme: dark light; } ``` -------------------------------- ### Detailed CSS for Fluid Typography Mixin Source: https://moderncss.dev/container-query-units-and-fluid-typography A comprehensive CSS example demonstrating fluid typography for headings, including base sizes, fluid growth values, and the application of the fluid mixin with container query support. ```css :root { --h1-base: 1.75rem; --h2-base: 1.5rem; --h3-base: 1.35rem; --h4-base: 1.15rem; } h1, .h1 { --font-size-base: var(--h1-base); font-size: var(--h1-base); } h2, .h2 { --font-size-base: var(--h2-base); --font-size-fluid: 2.5cqi; font-size: var(--h2-base); } h3, .h3 { --font-size-base: var(--h3-base); --font-size-fluid: 2.25cqi; font-size: var(--h3-base); } h4, .h4 { --font-size-base: var(--h4-base); --font-size-fluid: 2cqi; font-size: var(--h4-base); } @supports (font-size: 1cqi) { :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) { font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi)); } } ``` -------------------------------- ### Setup Custom Properties for Headlines Source: https://moderncss.dev/container-query-units-and-fluid-typography Define base font sizes for headline levels 1-4 using custom properties. Each headline rule also updates a `--font-size` custom property for use in mixin rules. ```css :root { --headline-1: 2.75rem; --headline-2: 2.35rem; --headline-3: 1.5rem; --headline-4: 1.15rem; } h1, .h1 { --font-size: var(--headline-1); font-size: var(--headline-1); } h2, .h2 { --font-size: var(--headline-2); font-size: var(--headline-2); } h3, .h3 { --font-size: var(--headline-3); font-size: var(--headline-3); } h4, .h4 { --font-size: var(--headline-4); font-size: var(--headline-4); } ``` -------------------------------- ### Complete CSS for Card Component and Layout Source: https://moderncss.dev/css-only-full-width-responsive-images-2-ways This comprehensive CSS includes basic resets, body styling for centering, and styles for the card row and individual card components. It sets up the layout and appearance for the responsive image examples. ```css /* Learn more and about the alternate solution: // @link https://moderncss.dev/css-only-full-width-responsive-images-2-ways/ */ * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: "Baloo 2", sans-serif; background-color: #f9f9f9; } main { padding: 2rem; } .card-row { display: grid; grid-gap: 2rem; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr)); } .card { border: 1px solid #c9c9c9; border-radius: 7px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); overflow: hidden; display: flex; flex-direction: column; } .card__content { padding: 20px; } .card__img { object-fit: cover; height: 30vh; } ``` -------------------------------- ### Set Text Alignment for Start Source: https://moderncss.dev/developing-for-imperfect-future-proofing-css-styles Use the `text-align: start` logical property to ensure text aligns correctly regardless of the content's direction (LTR or RTL). This property will automatically adjust to `right` for RTL text. ```css .comment { text-align: start; } ``` -------------------------------- ### CSS Specificity Example Source: https://moderncss.dev/guide-to-advanced-css-selectors-part-one Demonstrates how selector specificity affects the applied color. The selector with the ID has higher specificity and overrides others. ```html
Item
``` ```css #specific .item { color: red; } span.item { color: green; } .item { color: blue; } ``` -------------------------------- ### Body Styling for Layout Source: https://moderncss.dev/custom-select-styles-with-pure-css Sets up the body with a minimum height, centers content using CSS Grid, and applies a font and background color. Useful for demo pages. ```css body { min-height: 100vh; display: grid; place-content: center; grid-gap: 0.5rem; font-family: "Baloo 2", sans-serif; background-color: #e9f2fd; padding: 1rem; } ``` -------------------------------- ### Using calc() with for initial-value Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property This snippet illustrates using calc() with viewport units within a syntax for the initial-value of a @property, allowing for dynamic behavior. ```css @property --heading-font-size { syntax: ""; inherits: true; initial-value: calc(18px + 1.5vi); } /* In practice, define your ideal sizing function using `clamp()` via an assignment on `:root` */ h2 { font-size: var(--heading-font-size); } ``` -------------------------------- ### Define Type Ratio Source: https://moderncss.dev/container-query-units-and-fluid-typography Set the `--type-ratio` custom property to establish the base ratio for font size scaling. This example uses a 'perfect fourth' ratio. ```css :root { /* Perfect Fourth */ --type-ratio: 1.33; } ``` -------------------------------- ### CSS Box Model Calculation Example Source: https://moderncss.dev/guide-to-advanced-css-selectors-part-one Illustrates how `box-sizing: border-box` affects the calculation of an element's width. With `border-box`, the padding is included within the specified width. ```css .box { width: 200px; padding: 10px; } ``` -------------------------------- ### Initial Fluid Typography Mixin with Clamp Source: https://moderncss.dev/container-query-units-and-fluid-typography Sets up a fluid font size using clamp, with a default container query unit for the preferred size. Use when you need font sizes to scale with container dimensions. ```css @supports (font-size: 1cqi) { :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, .fluid-type) { font-size: clamp( /* TODO: define a minimum size */, var(--font-size-fluid, 5cqi), var(--font-size) ); } } ``` -------------------------------- ### Standard Use of Custom Properties Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property Demonstrates the basic usage of CSS custom properties to define and apply a color. ```css :root { --color-blue: blue; } .color-blue { color: var(--color-blue); } ``` -------------------------------- ### Set Scroll Margin with scroll-margin-top Source: https://moderncss.dev/12-modern-css-one-line-upgrades Adds an offset to an element in the context of scroll position, useful for sticky navigation. This example sets a default offset for any element with an ID. ```css [id] { scroll-margin-top: 2rem; } ``` -------------------------------- ### HTML Structure for Responsive Layouts Source: https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox This HTML structure sets up navigation, a main content area, and lists of cards. It includes classes for grid, flex, and flex-pancake layouts, along with inline styles for minimum sizing. Use this as a base for applying different responsive techniques. ```html

Dashboard

  • Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon.

    Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.

  • Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon.

    Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.

  • Using `.flex--auto` on titles

    • Ice Cream Butter Pecan
    • Musical Artist Justin Timberlake
    • Painter Vincent Van Gogh
  • Card Header Of A Longish Nature

    • Ice Cream Butter Pecan
    • Musical Artist Justin Timberlake
    • Painter Vincent Van Gogh
  • Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon.

    Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.

  • Using `.flex--auto` on titles

    • Ice Cream Butter Pecan
    • Musical Artist Justin Timberlake
    • Painter Vincent Van Gogh
  • Card Header Of A Longish Nature

    • Ice Cream Butter Pecan
    • Musical Artist Justin Timberlake
    • Painter Vincent Van Gogh
``` -------------------------------- ### Responsive Main Element Sizing and Spacing Source: https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max Applies min() to cap the width of a main element and max() to ensure minimum top margin, adapting to viewport size. ```css main { // Responsively cap width width: min(60ch, 100vw - 2rem); // Responsively allow a greater distance on taller viewports margin-top: max(8vh, 2rem); margin-right: auto; margin-left: auto; } ``` -------------------------------- ### Responsive Triangle Styles with CSS Source: https://moderncss.dev/pure-css-shapes-3-ways Includes general body and triangle styling, with specific styles for border, gradient, and clip-path methods to create responsive triangles. ```css * { box-sizing: border-box; } body { display: grid; place-content: center; grid-gap: 2rem; min-height: 100vh; padding: 2rem; @media (min-width: 40em) { grid-auto-flow: column; } } .triangle { display: grid; place-content: center; width: 30vw; height: 30vw; border: 1px dashed #777; &::after { content: ""; } &::before { content: attr(data-type); position: absolute; padding: 0.15em 0.25em; background-color: #777; color: #fff; } } .border::after { border-style: solid; border-color: transparent; border-width: 3vw 0 3vw 5vw; border-left-color: blue; } $t: rgba(white, 0); .gradient::after { width: 5vw; height: 6vw; background-image: linear-gradient(32deg, blue 50%, $t 50%), linear-gradient(148deg, blue 50%, $t 50%); background-position: top left, bottom left; background-size: 100% 50%; background-repeat: no-repeat; } // Make clip-paths easy with // @link https://bennettfeely.com/clippy/ .clip-path::after { width: 5vw; height: 6vw; background-color: blue; clip-path: polygon(0 0, 0% 100%, 100% 50%); } ``` -------------------------------- ### Initialize Level Size Variable Source: https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale Initialize a variable to hold the current heading level's font size, starting with the base font size. This variable will be updated within the loop. ```scss $level-size: $type-base-size; ``` -------------------------------- ### Define Adaptive Padding with clamp() Source: https://moderncss.dev/contextual-spacing-for-intrinsic-web-design Use clamp() with percentages and rem units to create responsive padding values that adapt to the element's inline size. This provides a more flexible alternative to fixed pixel values. ```css :root { --padding-sm: clamp(1rem, 3%, 1.5rem); --padding-md: clamp(1.5rem, 6%, 3rem); --padding-lg: clamp(3rem, 12%, 6rem); } ``` -------------------------------- ### HTML Structure for Footer Demo Source: https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid Basic HTML structure including header, main content, and footer elements. ```html

Hello World

Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.

© ACME

``` -------------------------------- ### HTML Structure for Radio Buttons Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons Two common HTML structures for radio buttons: input wrapped in label, or input and label as siblings using `for` attribute. The example uses the input-wrapped-in-label approach. ```html ``` ```html ``` ```html ``` -------------------------------- ### Fluid Typography using cqi Source: https://moderncss.dev/container-query-units-and-fluid-typography Use `clamp()` with `cqi` units to create fluid font sizes that respond to container dimensions. This example sets a fluid font size for an element with the class `fluid-type`. ```css .fluid-type { font-size: clamp(1rem, 4cqi, 3rem); } ``` -------------------------------- ### Basic Navigation Container Styles Source: https://moderncss.dev/css-only-accessible-dropdown-navigation-menu Sets up the main navigation container as a grid and removes default list styles. This forms the foundation for the navigation structure. ```css nav { background-color: #eee; padding: 0 1rem; display: grid; place-items: center; ul { list-style: none; margin: 0; padding: 0; display: grid; li { padding: 0; } } } ``` -------------------------------- ### Label Grid Layout Source: https://moderncss.dev/pure-css-custom-checkbox-style Configures the label to use CSS grid layout, enabling alignment of the input and label text with a defined gap. This setup is crucial for positioning the custom checkbox relative to its text. ```css .form-control { font-family: system-ui, sans-serif; font-size: 2rem; font-weight: bold; line-height: 1.1; display: grid; grid-template-columns: 1em auto; gap: 0.5em; } ``` -------------------------------- ### Responsive Container Width with Min() Source: https://moderncss.dev/contextual-spacing-for-intrinsic-web-design Create a responsive container that adjusts its width based on viewport size and a maximum character width. Margin auto centers the container. ```css .container { width: min(100vw - 3rem, 80ch); margin-inline: auto; } ``` -------------------------------- ### Basic Content HTML Structure Source: https://moderncss.dev/pure-css-smooth-scroll-back-to-top Sets up the semantic HTML for a page, including a header with an ID for the top anchor and a 'back to top' link. ```html
Title
``` -------------------------------- ### Show Link List and Hide Menu Button Source: https://moderncss.dev/modern-css-for-dynamic-component-based-architecture Uses a container query on the 'menu' container to display the link list and hide the 'Menu' button when the inline size reaches 60 characters. This adapts the navigation for larger spaces. ```css @container menu (inline-size >= 60ch) { .navigation__menu button { display: none; } .navigation__menu ul { display: flex; } } ``` -------------------------------- ### Using @supports for initial-value fallback Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property This demonstrates how to use @supports to conditionally define an initial-value for a @property based on browser support for a specific feature. ```css @supports ([property|feature]) { /* Feature is supported, use for initial-value */ } @supports not ([property|feature]) { /* Feature unsupported, use alternate for initial-value */ } ``` -------------------------------- ### Fluid Typography with Clamp and Container Query Units Source: https://moderncss.dev/container-query-units-and-fluid-typography Implements fluid typography using `clamp()` with container query units (`cqi`) and CSS variables for dynamic font sizing based on container dimensions. This approach ensures text scales smoothly within its container. ```css font-size: clamp( max(var(--body-font-size), var(--_font-min)), var(--_font-min) + 1cqi, var(--font-size) ); } ``` -------------------------------- ### Apply Button Size and Spacing Source: https://moderncss.dev/css-button-styling-guide Sets padding, minimum width, and minimum height for buttons. Uses relative units for responsive sizing and ensures adequate touch target size. ```css a.button, button.button { // ... existing styles padding: 0.25em 0.75em; min-width: 10ch; min-height: 44px; } ``` -------------------------------- ### Adjusting Font Size Ratio with Calc Source: https://moderncss.dev/container-query-units-and-fluid-typography Demonstrates how to adjust the base font size for a specific level using `calc()` and CSS variables. This is useful for fine-tuning the type scale ratio when it might be too close to the body copy size. ```css --font-size-4: calc((var(--body-font-size) + 0.25rem) * var(--type-ratio)); ``` -------------------------------- ### Define a list of valid colors for --color-blue Source: https://moderncss.dev/providing-type-definitions-for-css-with-at-property This example shows how to use a list of custom idents within the syntax descriptor of @property to restrict the --color-blue custom property to accept only 'blue', 'cyan', or 'dodgerblue'. Invalid values will fall back to the initial-value. ```css @property --color-blue { syntax: "blue | cyan | dodgerblue"; inherits: true; initial-value: blue; } .color-blue { color: var(--color-blue); } .demo p { --color-blue: dodgerblue; } ``` -------------------------------- ### CSS Grid Techniques Implementation Source: https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert Implements CSS Grid for auto-flow columns, content centering, and responsive column layouts using `repeat(auto-fit, minmax(...))`. ```css :root { --grid-col-breakpoint: 10rem; } .grid-auto-flow { display: grid; grid-auto-flow: column; grid-gap: 1rem; list-style: none; margin: 0; padding: 0; li { outline: 1px dashed red; } } .center { display: grid; place-content: center; width: 90vw; height: 30vh; outline: 1px dashed blue; } .responsive-columns { display: grid; grid-template-columns: repeat( auto-fit, minmax(var(--grid-col-breakpoint), 1fr) ); grid-gap: 1rem; width: 90vw; span { outline: 1px dashed green; } } * { box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; font-family: "Baloo 2", sans-serif; font-size: 3rem; } ``` -------------------------------- ### Base Gallery Styles Source: https://moderncss.dev/responsive-image-gallery-with-animated-captions Initial CSS to remove list styles, set up the gallery as a grid container, and ensure images fit within their grid columns. ```css .gallery { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr)); gap: 1rem; } .gallery img { display: block; width: 100%; } ``` -------------------------------- ### Fit-Content with Prefixed Properties Source: https://moderncss.dev/testing-feature-support-for-modern-css Demonstrates using `width: fit-content` with vendor prefixes (`-webkit-`, `-moz-`) for broader compatibility. The unprefixed version is listed last to be used when supported. ```css .example { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } ```