Skip to content

zedix/awesome-html-css

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
README.md
README.md
 
 

Repository files navigation

Awesome HTML & CSS (with super powers)

Tip

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

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

The <dialog> element

Note

IMO, the dialog element has reached the tipping point of generally being the better option for web developers who need to implement dialogs in their web pages. The number of accessibility requirements a developer needs to be aware of, and the level of effort to implement custom ARIA dialogs is now largely taken care of by browsers. — Scott O'Hara

<dialog open>
  <!-- This form will close its dialog when submitted -->
  <form method="dialog">
    <header>
      <h3>Dialog title</h3>
      <button onclick="this.closest('dialog').close('close')">✗</button>
    </header>
    <article>…</article>
    <footer>
      <menu>
        <button autofocus type="reset" onclick="this.closest('dialog').close('cancel')">Cancel</button>
        <button type="submit" value="confirm">Confirm</button>
      </menu>
    </footer>
  </form>
</dialog>
dialog::backdrop {
  /* Styles and animations for the backdrop */
}

The <details> element

Exclusive Accordion:

<details name="my-accordion">
  <summary>Summary 1</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</details>

<details name="my-accordion" open>
  <summary>Summary 2</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</details>

The <details> elements that are part of an exclusive accordion don't necessarily need to be siblings. They can be scattered across the document.

The popover attribute

Note

Built-in accessibility via keyboard behavior, tab focus management, top-layer support, and (optional) light-dismiss

The Popover API helps you build menus, selection, and tooltips. It supports:

  • Promotion to the top layer. Popovers will appear on a separate layer above the rest of the page, so you don't have to play around with z-index.
  • Light-dismiss functionality. Clicking outside of the popover area will close the popover and return focus.
  • Default focus management. Opening the popover makes the next tab stop inside the popover.
  • Accessible keyboard bindings. Hitting the esc key or double toggling will close the popover and return focus.
  • Accessible component bindings. Connecting a popover element to a popover trigger semantically.
<button invoketarget="actions">Actions</button>
<div role="menu" id="actions" popover>
  <button role="menuitem" tabindex=-1 autofocus>Edit</button>
  <button role="menuitem" tabindex=-1>Hide</button>
  <button role="menuitem" tabindex=-1>Delete</button>
</div>

Progressively-enhanced entry/exit animation to your popovers or dialogs:

/* Transition to these styles on entry, and from these styles on exit */
[popover]:popover-open {
  opacity: 1;
  rotate: 0turn;
  transition: rotate .5s, opacity .5s, display .5s allow-discrete, overlay .5s allow-discrete;
}

/* Entry transition starts with these styles */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    rotate: 1turn;
  }
}

/* Exit transition ends with these styles */
[popover]:not(:popover-open) {
  scale: 0;
  transition: scale .3s, display .3s allow-discrete, overlay .3s allow-discrete;
}

The interesttarget, invoketarget & invokeaction attributes

<button invoketarget="my-dialog">This opens a dialog</button>
<dialog id="my-dialog">This is the dialog</dialog>

Adding invoketarget and invokeaction attributes to <button> and <input type="button"> / <input type="reset"> elements would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. Buttons with invoketarget will - when clicked, touched, or enacted via keypress - dispatch an InvokeEvent on the element referenced by invoketarget, with some default behaviours.

The focusgroup attribute

image

The CloseWatcher API

"Close requests" are a new concept that encompasses user requests to close something currently open, using the Esc key on desktop or the back gesture/button on Android.

const watcher = new CloseWatcher();

// This fires when the user sends a close request, e.g. by pressing Esc on
// desktop or by pressing Android's back button.
watcher.onclose = () => {
  myModal.close();
};

// You should destroy watchers which are no longer needed, e.g. if the
// modal closes normally. This will prevent future events on this watcher.
myModalCloseButton.onclick = () => {
  watcher.destroy();
  myModal.close();
};

The switch attribute

<style> .special { accent-color: papayawhip } </style>
<input type="checkbox" switch checked>
<input type="checkbox" switch checked class="special">

The select v2 element (ex <selectlist> ⇢ ex <selectmenu>)

<select class="my-custom-select">
  <div slot="button">
    <span behavior="selected-value" slot="selected-value"></span>
    <button behavior="button"></button>
  </div>
  <div slot="listbox">
    <div popover="auto" behavior="listbox">
       <option value="one">one</option>
       <option value="two">two</option>
    </div>
  </div>
</select>

image

<select>
  <button class="action-btn" type="button">
    <selectedoption>
      <span class="preview-heading">Create a merge commit</span>
      <span class="action-heading">Merge Pull Request</span>
      <span class="description">All commits from this branch will be added to the base branch via a merge commit.</span>
    </selectedoption>
  </button>
  <button class="open-list-btn" type="selectlist">
    <span class="arrow">
      <figure>↓</figure> <!-- should be image, using this for demo shortcut only -->
    </span>
  </button>
  <listbox>
    <option value="merge-commit">
      <span class="preview-heading">Create a merge commit</span>
      <span class="action-heading">Merge Pull Request</span>
      <span class="description">All commits from this branch will be added to the base branch via a merge commit.</span>
    </option>
    <option value="squash-merge">
      <span class="preview-heading">Squash and merge</span>
      <span class="action-heading">Squash and merge</span>
      <span class="description">The 1 commit from this branch will be added to the base branch.</span>
    </option>
    <option value="rebase-merge">
      <span class="preview-heading">Rebase and merge</span>
      <span class="action-heading">Rebase and merge</span>
      <span class="description">The 1 commit from this branch will be rebased and added to the base branch.</span>
    </option>
  </listbox>
</select>

Appendix: 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 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