Skip to content
  1. ol and ul accept the type attribute. You can use it to set a different numbering type in HTML.

    <ol type="a">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    </ol>

    <ol type="A">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    </ol>

    <ol type="i">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    </ol>

    <ol type="I">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    </ol>

    <ul type="1">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    </ul>

    https://codepen.io/matuzo/pen/qBNBpgw?editors=1000

  2. The order in which transform functions in the transform shorthand property are defined matters.

    The order in which transform functions in the transform shorthand property are defined matters.

    https://codepen.io/pawelgrzybek/pen/GRZbjdv

  3. You can use the nomodule attribute to run JavaScript code only in browsers that don’t support JS modules.

    You can use the nomodule attribute to run JavaScript code only in browsers that don’t support JS modules.

    https://codepen.io/matuzo/pen/vYGzyKJ

  4. Using the background-origin property you can position background images relative to the inner border edge (default), outer border edge, or the content edge.

    Using the background-origin property you can position background images relative to the inner border edge (default), outer border edge, or the content edge.

    https://codepen.io/matuzo/pen/vYLqoRM?editors=1100

  5. You can add the option { once: true } to an event listener to automatically remove it when has been invoked

    You can add the option { once: true } to an event listener to automatically remove it when has been invoked

    https://codepen.io/matuzo/pen/wvMOpXp?editors=1010

  6. The nullish coalescing operator (??) only returns its right-hand side operand when its left-hand side operand is null or undefined.

    The nullish coalescing operator (??) only returns its right-hand side operand when its left-hand side operand is null or undefined.

    https://codepen.io/matuzo/pen/YzwJRaN?editors=1012

  7. Optional chaining allows you to chain methods or properties, and conditionally continue down the chain if the value is not null or undefined.

    Optional chaining allows you to chain methods or properties, and conditionally continue down the chain if the value is not null or undefined.
  8. You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.

    You can use the removeProperty method to remove a specific inline CSS property defined in the style attribute.

    https://codepen.io/matuzo/pen/OJyQgmr

  9. There’s a space-separated syntax for values in functional color notations.

    There’s a space-separated syntax for values in functional color notations.
  10. JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.

    JSON.stringify takes 3 parameters. The third parameter can be used to pretty-print the output.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

  11. There's native, CSS-only smooth scrolling.

    There's native, CSS-only smooth scrolling.

    https://codepen.io/matuzo/pen/yLNpKWm

  12. You can target Inverted Colors Mode mode in CSS

    You can target Inverted Colors Mode mode in CSS

    https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/

  13. You can use JavaScript (Vibration API) to vibrate devices

    You can use JavaScript (Vibration API) to vibrate devices

    https://codepen.io/matuzo/pen/rNaPOYJ

  14. You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.

    You can disable all form elements in a fieldset by setting the disabled attribute on the fieldset.

    https://codepen.io/matuzo/pen/gObjOzj?editors=1000

  15. You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.

    You can list all pseudo elements of an element in the CSS pane in Firefox Developer Tools.
  16. You can emulate dark mode and reduced motion in Chrome Dev Tools.

    You can emulate dark mode and reduced motion in Chrome Dev Tools.

    https://umaar.com/dev-tips/211-media-query-simulation/

  17. You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).

    You can instruct browsers to print pages in landscape orientation (Chrome/Opera only).
  18. You can change the filename of a downloadable file by defining a value in the download attribute.

    You can change the filename of a downloadable file by defining a value in the download attribute.
  19. The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.

    The bullet or number of a list-item can be selected and styled with the ::marker pseudo-element.

    https://codepen.io/matuzo/pen/abbqMEZ?editors=1100

  20. If an input element has the attribute value autocomplete="new-password", browsers can suggest securely-generated passwords.

    If an input element has the attribute value autocomplete="new-password", browsers can suggest securely-generated passwords.

    https://codepen.io/matuzo/pen/WNNEKVE

  21. You can use the CSS Paint API to create background images in CSS.

    You can use the CSS Paint API to create background images in CSS.
  22. You can search the elements panel in Developer Tools not only for strings but also selectors.

    You can search the elements panel in Developer Tools not only for strings but also selectors.
  23. The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)

    The webkitdirectory attribute allows users to select directories instead of files. (desktop browsers only)

    https://codepen.io/matuzo/pen/KOdpmq?editors=1111

  24. You can do responsive preloading because preload link elements accept the media attribute like any other link element.

    You can do responsive preloading because preload link elements accept the media attribute like any other link element.

    https://codepen.io/matuzo/debug/NQPRvN

  25. It's possible to identify how many separate fingers are touching the screen.

    It's possible to identify how many separate fingers are touching the screen.

    https://codepen.io/matuzo/debug/NQPRvN

  26. SVGs are focusable in Internet Explorer. We can set focusable="false" to prevent that.

    SVGs are focusable in Internet Explorer. We can set focusable="false" to prevent that.

    https://codepen.io/matuzo/pen/vqOdVv?editors=1100

  27. macOS uses Papyrus as the default font when you define the generic font family “fantasy”.

    macOS uses Papyrus as the default font when you define the generic font family “fantasy”.

    https://codepen.io/matuzo/pen/joZQwm

  28. text-decoration doesn't have to be a solid line. There’s also dotted, dashed, double, and wavy.

    text-decoration doesn't have to be a solid line. There’s also dotted, dashed, double, and wavy.

    https://codepen.io/matuzo/pen/WBXBvb

  29. text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.

    text-decoration is a shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.

    https://codepen.io/matuzo/pen/wbrwpJ

  30. Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.

    Overflowing block-level elements with overflow set to scroll or auto are focusable in Firefox.

    https://codepen.io/matuzo/pen/RdJoqE?editors=1100

  31. You can use conditional comments to target specific versions of Outlook.

    You can use conditional comments to target specific versions of Outlook.

    https://templates.mailchimp.com/development/css/outlook-conditional-css/

  32. You can turn the outline of an element to the _inside_ by setting the outline-offset property to a negative value. (Not supported in IE)

    You can turn the outline of an element to the _inside_  by setting the outline-offset property to a negative value. (Not supported in IE)

    https://codepen.io/matuzo/pen/VgGpBE?editors=1100

  33. You can center a flex-item vertically and horizontally by applying margin: auto; to it.

    You can center a flex-item vertically and horizontally by applying margin: auto; to it.

    https://css-tricks.com/how-well-do-you-know-css-layout/#article-header-id-8

  34. If you press CMD/Ctrl and click on a property or property value in the style panel, @ChromeDevTools jumps directly to the respective css/scss file and line.

    If you press CMD/Ctrl and click on a property or property value in the style panel, @ChromeDevTools jumps directly to the respective css/scss file and line.
  35. About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.

    About the @at-root directive. It moves nested styles out from within a parent selector or nested directive.

    https://codepen.io/matuzo/pen/aXmzYd

  36. IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.

    IE 11 requires a unit to be added to the third argument (flex-basis) of the flex property.

    https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673531%28v%3dvs.85%29#setting-the-flexibility-of-a-child-element

  37. You can use `navigator.connection` to get information about the connection like round-trip time, bandwidth, connection type (e.g. 3g, 4g) or if Data-Saver is enabled.

    You can use `navigator.connection` to get information about the connection like round-trip time, bandwidth, connection type (e.g. 3g, 4g) or if Data-Saver is enabled.

    https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

  38. The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.

    The grid-auto-flow property takes up to two values. row, column, dense, row dense, or column dense.

    https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

  39. You can pass an `options` object, which only has a single property, to the `focus()` method to prevent scrolling on focus.

    You can pass an `options` object, which only has a single property, to the `focus()` method to prevent scrolling on focus.

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

  40. There’s a tab-size property. It controls the width of the tab (U+0009) character.

    There’s a tab-size property. It controls the width of the tab (U+0009) character.

    https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size

  41. How to get a random background-color (or any other value) each time I compile Sass.

    How to get a random background-color (or any other value) each time I compile Sass.

    https://codepen.io/matuzo/pen/oJyEVO?editors=1100