Skip to content

zedix/awesome-html-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 

Repository files navigation

Awesome HTML & CSS (with super powers) — The golden age of Web UI

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

Tip

Prepare to be dazzled by a symphony of fluidity, dynamism, and expressive power as we unveil the next generation of web UI. It’s a world where user experiences transcend the ordinary and developers become true visual orchestrators. Discover how you can turn 7,000 lines of JavaScript into a mere 7 lines of declarative HTML and CSS, unlocking unprecedented levels of efficiency and elegance.

HTML

Following

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 (-): <selectedcontent>

Note

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

CSS

All CSS new features (87)

  • At-Rules (14): @container, @else, @function, @keyframes, @layer, @mixin, @position-try, @property, @scope, @starting-style, @supports, @view-transition, @when
  • Functions (27): anchor(), attr(), circle(), clamp(), color(from), color-mix(), contrast-color(), cos(), env(), fit-content(), if(), image-set(), inherit(), light-dark(), linear(), max(), min(), polygon(), random(), repeat(), scroll(), sibling-count(), sibling-index(), sin(), tan(), var(), view()
  • Properties (16): accent-color, animation-composition, animation-range, animation-timeline, aspect-ratio, color-scheme, contain-intrinsic-size, container-type, content-visibility, font-palette, forced-color-adjust, interpolate-size, reading-flow, scroll-behavior, scrollbar-gutter, text-wrap
  • Pseudo Elements (18): ::backdrop, ::checkmark, ::column, ::details-content, ::grammar-error, ::highlight(), ::part(), ::picker(), ::picker-icon, ::scroll-button(), ::scroll-marker(), ::slotted(), ::spelling-error, ::target-text, ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-new(), ::view-transition-old()
  • Selectors (13): :active-view-transition, :active-view-transition-type(), :focus-visible, :has(), :heading, :heading(), :is(), :popover-open, :scope, :state(), :target-current, :user-invalid, :user-valid, :where()

Resources

HTML over the wire (instead of JSON)

CSS-first components frameworks

About

Resources on the super power of HTML and CSS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •