Skip to content

zedix/awesome-html-css

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
resources
resources
 
 
README.md
README.md
 
 

Repository files navigation

Awesome HTML & CSS (with super powers)

Tip

Stop writing unnecessary, heavy, thread-blocking JavaScript — Una Kravets

Tip

CSS is now the most powerful design tool for the Web — Matthias Ott

Tip

With all the new web features right on their way (view-transitions, @​starting-style, calc-size(), speculation rules, style and container queries, relative color syntax, ... the list goes on and on), it's time to face it... 🫣👇 — Stefan Judis

HTML

All HTML elements (115)

  • Document element (1): <html>
  • Document metadata (6): <head>, <title>, <base>, <link>, <meta>, <style>,
  • Sections (15): <body>, <article>, <section>, <nav>, <aside>, <h1-6>, <hgroup>, <header>, <footer>, <address>
  • Grouping content (16): <p>, <hr>, <pre>, <blockquote>, <ol>, <ul>, <menu>, <li>, <dl>, <dt>, <dd>, <figure>, <figcaption>, <main>, <search>, <div>
  • Text-level semantics (29): <a>, <em>, <strong>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <ruby>, <rt>, <rp>, <data>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <bdi>, <bdo>, <span>, <br>, <wbr>
  • Edits (2): <ins>, <del>
  • Embedded content (13): <picture>, <source>, <img>, <iframe>, <embed>, <object>, <video>, <audio>, <track>, <map>, <area>, <math>, <svg>
  • Tabular data (10): <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>
  • Forms (14): <form>, <label>, <input>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>, <fieldset>, <legend>
  • Interactive elements (3): <details>, <summary>, <dialog>
  • Custom elements (2): <template>, <slot>
  • Scripting (3): <script>, <noscript>,<canvas>
  • Experimental (1): <portal>
  • Proposed (-): <selectedoption>

Note

These last element landed in the HTML spec was the <search> element, at March 24th 2023.

HTML over the wire (instead of JSON)

CSS

CSS subgrid

CSS color-mix()

CSS Container Queries (container-type, container-name, @container)

CSS Style Queries

figure {
  container-name: figure;
  --featured: true;
}

@container figure style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

CSS if() notation (inline conditionals on custom properties / self-styling feature)

zx-tag {
  /* if(condition(): foo; else: bar) */
  background-color: if(
    (--variant: success): green;
    else: white;
  );
}

CSS Custom Functions & Mixins

CSS Anchor Position API

.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  /* Fixpos means we don’t need to worry about
     containing block relationships;
     the tooltip can live anywhere in the DOM. */
  position: fixed;

  /* All the anchoring behavior will default to
     referring to the --tooltip anchor. */
  position-anchor: --tooltip;

  /* Align the tooltip’s bottom to the top of the anchor;
     this also defaults to horizontally center-aligning
     the tooltip and the anchor (in horizontal writing modes). */
  inset-area: block-start;

  /* Automatically swap if this overflows the window
    so the tooltip’s top aligns to the anchor’s bottom
    instead. */
  position-try: flip-block;

  /* Prevent getting too wide */
  max-inline-size: 20em;
}

Update April 2024: here is all the code you need to get a basic anchor now:

#my-tooltip {
  /*  Set the bottom of the anchored element (tooltip) to the top of the anchoring element  */
  bottom: calc(anchor(top));
  /*  If can't fit it in the screen anymore, flip the anchored element in the block direction */
  position-try-options: flip-block;
  /*  Center the anchor with justification  */
  justify-self: anchor-center;
}
[popover] {
  top: anchor(top);
  left: anchor(right);
  position-try-options: flip-block, flip-inline;
}

CSS Scroll-Driven Animations (view-timeline, animation-timeline, view())

@keyframes slide-left {
    from { transform: scale(0.7); }
    to   { transform: scale(1); }
}
.scroll-animate-slide-left {
    transform-origin: top right;
    animation: slide-left ease-out both;
    animation-timeline: view(block -64px);
    animation-range: entry 0% entry 50%;
}

CSS Custom Highlight API

::highlight(example) {
  color: hotpink;
}

CSS Discrete Property Animations

Ability to animate discrete animations, such as animating to and from display: none.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

CSS View Transitions

CSS Handy (Old) Things

Above list from Adam Argyle

CSS Tips

.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 38%;
}
.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}

Resources

UI Kit

  • <dialog>: modal content, sidebars
  • <details>: accordions, disclosures
  • popover: menus, custom toast notifications, content pickers
  • anchor: tooltips

About

Resources on the super power of HTML and CSS.

Topics

html web-standards awesome-list html-css awesome-css awesome-html

Resources

Readme
Activity

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published