Web Analytics Made Easy -
StatCounter Simple way to test support for CSS property - CodingForum

Announcement

Collapse
No announcement yet.

Simple way to test support for CSS property

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Simple way to test support for CSS property

    I recently needed to check whether a certain CSS property value is supported in IE/Edge using JavaScript. A quick internet search only brought examples to test for properties (e. g. “text-shadow”) but not for specific values, or recommended convoluted JS libraries such as Modernizr to test it, but I wanted something simple. Specifically, I needed to check for support of display: grid (IE and old Edge only support the value -ms-grid), and here’s what I came up with:

    Code:
    // create hidden element
    var temp = document.createElement('div');
    // set style on it
    temp.style.display = 'grid';
    // check the returned value
    if(temp.style.display) {
      // do something if “grid” is supported
    }
    IE/Edge will return an empty string (or something like that) because it doesn’t support the value “grid” for the “display” property, while supporting browsers will return the value “grid”, so we can work with that result.
    Stop solving problems you don’t yet have!

  • #2
    Unless it's something brand new I look it up on https://www.caniuse.com/
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Yeah, that’s good for knowing what is supported, but if you need to perform some task depending on support (e. g. add a different class name), you need a script.
      Stop solving problems you don’t yet have!

      Comment


      • #4
        Gotcha
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment


        • #5
          Hi there VIPStephan,

          something like this perhaps...

          Code:
          
          <!DOCTYPE HTML>
          <html lang="en">
          <head>
          
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
          
          <title>Untitled document</title>
          
          <!--<link rel="stylesheet" href="screen.css" media="screen">-->
          
          <style media="screen">
          div {
              display:grid;
          }
          </style>
          
          </head>
          <body>
          
          <div>test div</div>
          
          <script>
          (function( d ) {
             'use strict';
          
             var element = d.querySelector('div'),
             compStyle = getComputedStyle( element, 'display'),   /* style to test */
             value = compStyle.getPropertyValue( 'display' );        /* style to test */
          
          if ( value === 'grid' ) {                                                    /* value to test */
              alert( 'display:grid is supported' ); //console.log('supported');
           }
          else {
              alert( 'display:grid is unsupported' ); //console.log('unsupported');
          }
          }( document ));
          </script>
          
          </body>
          </html>
          

          coothead
          ~ the original bald headed old fart ~

          Comment


          • #6
            Generally if you're messing around with stuff like this in JavaScript, you're doing something wrong... and since IE doesn't support it, if you need to support IE don't use it in the first place rather than sniffing.

            What's the actual usage case?
            I'll kill you and your dreams tonight, begin new life.
            Bleed your death upon me, let your bloodline feed my youth.
            https://cutcodedown.com

            Comment


            • #7
              Had a complicated markup vs. layout combination that was simple to achieve with grid; I needed to modify the DOM on the fly to get the same layout using flexbox in IE. Of course, the non-JS fallback would just be the linear layout, as the elements appear in the DOM; no harm done for anyone.
              Stop solving problems you don’t yet have!

              Comment


              • #8
                Originally posted by VIPStephan View Post
                Had a complicated markup vs. layout combination that was simple to achieve with grid; I needed to modify the DOM on the fly to get the same layout using flexbox in IE. Of course, the non-JS fallback would just be the linear layout, as the elements appear in the DOM; no harm done for anyone.
                1) if you can do it in flex, and are GOING to do it in flex, why have a grid version? You didn't make it simpler if you still have to do it the "hard" way as well... all you've done is add more work.

                2) If you use JavaScript for layout, there's something really hinky going on.

                3) Since flex only gains you two versions of IE, one of which is going to be buggy as sin, is it even worth the effort?
                I'll kill you and your dreams tonight, begin new life.
                Bleed your death upon me, let your bloodline feed my youth.
                https://cutcodedown.com

                Comment


                • #9
                  Originally posted by deathshadow View Post
                  1) if you can do it in flex, and are GOING to do it in flex, why have a grid version? You didn't make it simpler if you still have to do it the "hard" way as well... all you've done is add more work.
                  Because the markup is semantic the way it is. And with grid it’s super easy, it’s just old Edge and IE 11 that can’t deal with this, and for these we need an alternative.
                  Originally posted by deathshadow View Post
                  2) If you use JavaScript for layout, there's something really hinky going on.
                  No, the JS solution is just an enhancement, not a necessity. It makes the intended layout work in IE/Edge without changing the markup for all browsers. And if the users have JS disabled in their old IE/Edge they get a plain linear layout but aren’t missing any content.
                  Originally posted by deathshadow View Post
                  3) Since flex only gains you two versions of IE, one of which is going to be buggy as sin, is it even worth the effort?
                  Let this be my decision. I wasn’t asking for advice but posting a script that can check for the support of a certain CSS value. It can be used for other things as well and some people might find this useful.
                  Stop solving problems you don’t yet have!

                  Comment

                  Working...
                  X