Even after working with HTML and CSS for years, there are always new things to discover and new features being added. Do already know these tricks or do you bring great shame upon your family?

As you know, you can use HTML and CSS to make websites. Here are somemorethings that you didn’t know about HTML and CSS. Or maybe you already knew.Congratulations.

5 More HTML and CSS Features You Didn't Know Existed

@supports

The @supports CSS rule allows for developers to check whether a user's browser supports particular CSS features. For example, to check whether a user's browser supports the use of display:grid, the following code snippet can be used:

<p><em>Your browser <span style="font-weight:bold;" id="supports_grid">does <span id="sg_not">not</span></span> support display:grid.</em></p> <style> @supports (display: grid) { #supports_grid { color:green; } #sg_not {display:none;} } @supports not (display: grid) { #supports_grid { color:red; } } </style>

Your browser does not support display:grid.

In addition to the obvious use cases, this feature also has implications for detecting user agent spoofing, especially when used with the JavaScript equivalent of CSS.supports. Checking for discrepancies between browser behavior and the client-specified user-agent can be used to detect whether a user-agent is being spoofed. Detecting user-agent mismatches by checking how browsers handle (among other factors) CSS rules is a practice that goes back a while; for example, reCaptcha uses user-agent mismatch detection, which is discussed at 6:29 in the video below:

This is also discussed in the written report for the same presentation on pages 3-4. While reCaptcha likely uses a different mechanism to detect these specific differences in browser functionality, the @supports rule may faciliate basic user-agent spoofing detection, particularly for milder use cases.

Ironically, while the @supports rule has relatively good support, there are a few browsers that do not support it.

Scroll Snapping

The CSS scroll-snap module is best demonstrated with the interactive demos below, which could easily be modified for features such as creating an image gallery, making a landing page that snaps to particular sections, and so on.

Code for the Demo Above

<div id="ss-wrapper"> <div class="ss-demo mandatory" style="background-color:grey;"> <div style="background-color:green;"></div> <div style="background-color:yellow;"></div> <div style="background-color:red;"></div> </div> <div class="ss-demo proximity" style="background-color:grey;"> <div style="background-color:green;"></div> <div style="background-color:yellow;"></div> <div style="background-color:red;"></div> </div> </div> <style> /* For Alignment */ #ss-wrapper { display:flex; justify-content:space-around; } .ss-demo { /* For Alignment */ width:40%; /* The Actual Code */ scroll-snap-points-y: repeat(300px); overflow-y: scroll; height:300px; } /* Set Snap Behavior - Always snap or only if close to boundary? */ .ss-demo.mandatory { scroll-snap-type: y mandatory; } .ss-demo.proximity { scroll-snap-type: y proximity; } .ss-demo div { height:300px; scroll-snap-align: start; } </style>

Lesser-Known HTML Event Attributes

While there are many commonly used HTML event attributes, such as onclick and onmouseover, there are many additional event attributes that are lesser-used. Several of these include:

onoffline/ononline demo

This sentence will update if you go on or offline.

<!DOCTYPE html> <html> <body ononline="onFunction()" onoffline="offFunction()"> <p>You are <strong id="online_status">???</strong>.</p> <script> function onFunction() { document.getElementById("online_status").innerHTML = "online"; } function offFunction() { document.getElementById("online_status").innerHTML = "offline"; } </script> </body> </html>

onresize demo

Your window size is ???.

<!DOCTYPE html> <html> <body onresize="record_window_size()"> <p>Your window size is <strong id="size_info" >???</strong>.</p> <script> function record_window_size() { document.getElementById("size_info" ).innerHTML = window.innerHeight + "x" + window.innerWidth; } record_window_size(); </script> </body> </html>

Easily Handle Multiple Image Options with the <picture> Tag

In general, when an image is created with the <img> tag, mobile-responsiveness is set up using style rules that contain @media queries. However, it is also possible to use the HTML <picture> tag to easily provide multiple images or image versions to be used on different devices and/or display sizes.

In the example above, if your window size is 993 pixels wide or larger, you'll see a grey icon; if it's between 768 to 992 pixels wide (inclusive), you'll see a red icon; if it's 767 pixels wide or under, you'll see a green icon. If your window size matches none of these conditions, you'll see a default icon (random-data-icon.png) with a question mark on it (although this case should not happen here).

Code Used for the Demo Above

<picture> <source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-grey.png" media="(min-width: 993px)"> <source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-red.png" media="(min-width: 768px)"> <source srcset="https://www.256kilobytes.com/storage/icons/graphics-card-icon-green.png" media="(max-width: 767px)"> <img src="https://www.256kilobytes.com/storage/icons/random-data-icon.png" /> </picture>

Scrollbar Styling

Most websites use the browser's default, built-in scrollbar. However, there is some existing browser support, specifically in WebKit-based browsers, for the use of the ::-webkit-scrollbar pseudo-element as well as a number of other supportin pseudo-elements such as ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb. If your browser supports these technologies, you can see them in action below with a custom scrollbar on the left and the default on the right:

While built-in CSS support for custom scrollbars is still relatively experimental, there are several articles that preview this type of functionality in more depth, such as this article by scrotch.io and this article by csstricks.com.

Code Used for the Demo Above

<style> /* Alignment */ #scroll-wrapper { display:flex; justify-content:space-around; } .ss-demo { width:40%; overflow-y: scroll; height:300px; } .ss-demo div { height:300px; } /* Actual Code */ #scroll-wrapper .ss-demo.custom::-webkit-scrollbar { width: 16px; } #scroll-wrapper .ss-demo.custom::-webkit-scrollbar-thumb { background: cyan ; border-radius:10px;} #scroll-wrapper .ss-demo.custom::-webkit-scrollbar-thumb:hover { background: lightcyan; } </style> <div id="scroll-wrapper"> <div class="ss-demo custom" style="background-color:grey;"> <div style="background-color:green;"></div> <div style="background-color:yellow;"></div> <div style="background-color:red;"></div> </div> <div class="ss-demo" style="background-color:grey;"> <div style="background-color:green;"></div> <div style="background-color:yellow;"></div> <div style="background-color:red;"></div> </div> </div>

One CSS Proposal-in-Progress You Didn't Know You Wanted

[Upcoming] CSS3 Native Mixins

Many people like mixins, which is one large reason why CSS preprocessors like SASS are used. For example, my home boy at scotch.io, who I have literally never talked to, but whatever, wrotea post about how to use SASS mixins.

However, if you’re reading this from the future, you don’t need that shit, unless you need to support some shitty browser that sucks ass and doesn’t supportthe @apply rule. As mentionedin the previous post on HTML and CSS tricks that you didn’t know about, CSS variables exist. Soon, this functionality will be extended to allow CSS such as the following to facilitate native mixins:

/* Define a CSS Variable */ :root { --link-style: { color:green; font-style:italic; } } /* Use @apply to Add the Rule Set */ a { @apply --link-style; }

Honorable Mentions

Share This Post