xtodo css

xtodo

grid-auto-rows is a CSS property that specifies the size of implicitly-created grid row tracks. It applies to rows that are not explicitly sized by grid-template-rows or grid-template-areas, such as those generated by the auto-placement algorithm when there are more items than defined rows, or when items are positioned outside the explicit grid.

Key values include:

  • auto: The default; row size is determined by the largest item in the row.
  • min-content: Row size depends on the smallest item in the row.
  • max-content: Row size depends on the largest item in the row.
  • : A fixed size (e.g., 100px).
  • : Relative to the grid container's block size.
  • fr: Fractional units of available space.
  • minmax(min, max): Defines a size range.
xtodo

when you make anchor tag inline-block, how to align it like before? 

a {
 display: inline-block;
 text-decoration: none;
 font-size: 1.2rem;
 line-height: 1;
 vertical-align: top;
 margin: 0;
 padding: 2px 0 2px 0;
}
.x {
 font-style: italic;
}

Borders & Accents
Apply to background with mask or border-image for creative frames.

/* Best practice - safe hover */
@media (hover: hover) {
  .menu-item:hover {
    color: red;
  }
}

/* Touch devices get different style */
@media (hover: none) {
  .menu-item {
    padding: 15px;        /* bigger touch targets */
  }
}
css font 2022-05-08 ZSXV
css font 2022-05-08 ZSXV

ai generated

top ten most important css features since 2015.

  1. CSS: Grid Layout → revolutionized two-dimensional layouts.
  2. CSS: Flexbox Layout
  3. CSS: Variable (Custom Property)
  4. Container Queries – lets components respond to their own size, not just the viewport.
  5. CSS: :has descendant selector
  6. CSS: nesting syntax
  7. Scroll Snap – smooth, controlled scrolling for carousels and pages.
  8. Aspect Ratio – the aspect-ratio property for maintaining proportions.
  9. Modern Color Functions – like oklch(), lch(), and lab() for better color control.
  10. CSS: cascade @layer

todo stuff