256 Kilobytes

[Code Demos] 5 More HTML and CSS Features You Didn't Know Existed (And One Work-in-Progress You Didn't Know You Wanted)

Articles in Style and Layout | By August R. Garcia

Published 2 months agoMon, 27 May 2019 16:56:02 -0700 | Last update 2 months agoMon, 27 May 2019 17:00:35 -0700

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?

5,690 views, 1 RAM, and 0 comments

As you know, you can use HTML and CSS to make websites. Here are some more things 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, wrote a 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 support the @apply rule. As mentioned in 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

    Users Who Have Downloaded More RAM:
    Hash Brown (2 months ago)
    🐏 ⨉ 1
    Posted by August R. Garcia 2 months ago

    Edit History

    • [2019-05-27 16:56 PDT] August R. Garcia (2 months ago)
    • [2019-05-27 16:56 PDT] August R. Garcia (2 months ago)
    • [2019-05-27 16:56 PDT] August R. Garcia (2 months ago)
    🕓 Posted at 27 May, 2019 16:56 PM PDT

    Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
    🗎 177 🗨 891 🐏 264
    Site Owner

    Grahew Mattham

    August Garcia is some guy who used to sell Viagra on the Internet. He made this website to LARP as a sysadmin while posting about garbage like user-agent spoofing, spintax, the only good keyboard, virtual assitants from Pakistan, links with the rel="nofollow" attributeproxiessin, the developer console, literally every link building method, and other junk.

    Available at arg@256kilobytes.com, via Twitter, or arg.256kilobytes.com. Open to business inquiries based on availability.


    Account created 8 months ago.
    177 posts, 891 comments, and 264 RAMs.

    Last active 2 hours ago:
    Commented in thread Is XNXX safe for looking at filthy pornography?

    Post a New Comment

    To leave a comment, login to your account or create an account.

    Do you like having a good time?

    Read Quality Articles

    Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

    View Articles →

    Argue with People on the Internet

    Use your account to explain why people are wrong on the Internet forum.

    View Forum →

    Vandalize the Wiki

    Or don't. I'm not your dad.

    View Wiki →

    Ask and/or Answer Questions

    If someone asks a terrible question, post a LMGTFY link.

    View Answers →

    Make Some Money

    Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

    Register an Account
    You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.