0

someone who use JS it could be very simple. Need to overwrite styles of one class if page is loaded in Safari browser. I think I have it all, just this line of code is problem.

This command doesnt talk to all elements with same class but it should:

document.getElementsByClassName('.background').className += " safari";

This is what I have. Mistake is in that javascript function.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    div {
      margin: 10px;
      background: inherit;
      width: 550px;
      height: 450px;
    }
    
    .background {
      background: rgba(255, 20, 0, 0.3);
      filter: blur(10px);
    }
    
    .safari {
      background: red!important;
      -webkit-backdrop-filter: blur(10px)!important;
    }
  </style>
</head>
<body>
  <div class='background'></div>
  <div></div>
  <div class='background'></div>
  <div></div>
  <div></div>
  <script type="text/javascript">
    if (navigator.userAgent.indexOf('Safari') != -1 &&
      navigator.userAgent.indexOf('Chrome') == -1) {
      document.getElementsByClassName('background').className += " safari";
    }
  </script>
</body>
</html>

WHAT I TRIED

1javascript

Have also tried using same code above changing class "background" to ID "background", than in javascript part of code i changed getElementsByClassName to getElementByID - that worked but it changed only first element with that ID. Rest of elements with that ID were ignored.

2conditional comment

I have tried avoiding JS and use conditional comment following link below - both browsers use webkit so I guess this is no way.
Is there any equivalent to IE conditional comment for chrome and safari?

Thanks for help.

Community
  • 1
  • 1
Brano
  • 57
  • 1
  • 12

1 Answers1

4

You need to loop through all of the elements that have that class

var bgelements = document.getElementsByClassName('background');

for(var i = 0; i < bgelements.length; i++) {
    bgelements[i].className += " safari";
}


<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{
             margin: 0;
             padding: 0;
            }
            
            div{
                margin: 10px;
                background: inherit;
                width: 550px;
                height: 450px;
            }

            .background{
                background: rgba(255,20,0,0.3);
                filter: blur(10px);
            }
            .safari{
                background: red!important;
                -webkit-backdrop-filter: blur(10px)!important;
            }
            
        </style>
    </head>
    <body>
        <div class='background'></div>
        <div></div>
        <div class='background'></div>
        <div></div>
        <div></div>
        
        
        <script type="text/javascript"> 
        if (navigator.userAgent.indexOf('Safari') != -1 && 
            navigator.userAgent.indexOf('Chrome') == -1) {
                var bgelements = document.getElementsByClassName('background');
                
                for(var i = 0; i < bgelements.length; i++) {
                    bgelements[i].className += " safari";
                }
                
            }
        </script>
    </body>
</html>
abney317
  • 7,760
  • 6
  • 32
  • 56
  • aaaah, magic, thank you @abney317. Works like expected. Hm, for some reason I had to wait some mins to mark your comment as answer. wth :D – Brano Jul 05 '18 at 20:02