Skip to content
  1. You can use the spellcheck attribute to instruct browsers that, if possible, an element should or should not be checked for spelling errors.

    <textarea spellcheck="false">
    Tis is jusst a test.
    </textarea>

    <div contenteditable spellcheck="false">
    Tis is jusst a test.
    </div>

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

  2. You can animate z-index.

    div {
    position: absolute;
    top: 0;
    left: 0;
    transition: z-index 2.5s;
    }

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

  3. You can make a link in an iframe open in its parent window, if you set target="_parent".

    <!-- Parent File-->
    <iframe src="https://codepen.io/matuzo/debug/YzGVXGV" frameborder="0"></iframe>

    <!-- Embedded file -->
    <ul>
    <li>
    <a href="https://a11yproject.com">no target</a>
    </li>
    <li>
    <a href="https://a11yproject.com" target="_blank">target="_blank"</a>
    </li>
    <li>
    <a href="https://a11yproject.com" target="_parent">target="_parent"</a>
    </li>
    </ul>

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

  4. Adding an i (or I) before the closing bracket in an attribute selector causes the value to be compared case-insensitively.

    <button class="mybutton">Send</button> <!-- red border -->
    <button class="myButton">Send</button> <!-- green border -->
    [class*="button" i] { /* matches mybutton and myButton */
    border: 10px solid green;
    }

    [class*="button"] { /* matches only mybutton */
    border-color: red;
    }

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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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.
  12. 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

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

    There’s a space-separated syntax for values in functional color notations.
  14. 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

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

    There's native, CSS-only smooth scrolling.

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

  16. 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/

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

    You can use JavaScript (Vibration API) to vibrate devices

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

  18. 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

  19. 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.
  20. 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/

  21. 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).
  22. 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.
  23. 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

  24. 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

  25. 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.
  26. 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.
  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

  35. 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/

  36. 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

  37. 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

  38. 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.
  39. 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

  40. 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

  41. 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

  42. 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

  43. 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

  44. 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

  45. 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