1

I've seen modernizr in use on Magento 2 but so far I haven't seen any examples of fixing cross browser issues (and yet a lot of use of flex). The compatible browser list is quite merciless - is this why I haven't seen it handled as frequently?

What is the best practise for browser compatible css? Or targeting browsers / features specifically?

1

They don't do an awful lot to handle it but that may be because they only support IE from 10+ (as Luma and Blank had too many selectors for IE9 and below) so it isn't so much of an issue.

Body class

They do use the IE body class for styling, for example:

magento/theme-frontend-blank/Magento_Theme/web/css/source/_module.less

.page-wrapper {
    ...

    .ie10 &,
    .ie11 & {
        height: 100%;
    }
}

Prefixes

They also use a few MS prefixes:

magento/theme-frontend-blank/web/css/source/_email-base.less

//  Allow smoother rendering of resized images in Internet Explorer (such as high-resolution logo)
    img {
        -ms-interpolation-mode: bicubic;
    }

iOS

There are also some references to iOS:

magento/theme-frontend-blank/web/css/source/_email-base.less

//  Remove link color on iOS
    .no-link a {
        color: @text__color !important;
        cursor: default !important;
        text-decoration: none !important;
    }

magento/theme-adminhtml-backend/web/css/source/_reset.less

html {
    //  Prevent iOS text size adjust after orientation change, without disabling user zoom.
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

Other

There is also the odd code here and there that handles it via markup:

I've just noticed this is from the Zend Framework, my bad. I'll leave it here as it's still technically in Magento.

magento/zendframework1/library/Zend/ProgressBar/Adapter/JsPush.php

protected function _outputData($data)
    {
        // 1024 padding is required for Safari, while 256 padding is required
        // for Internet Explorer. The <br /> is required so Safari actually
        // executes the <script />
        echo str_pad($data . '<br />', 1024, ' ', STR_PAD_RIGHT) . "\n";
    }
  • Any idea how it's getting ie11, etc? And if this goes lower? Edit: Just read, ignore me. – LM_Fielding Mar 14 '17 at 15:15
  • 1
    @LM_Fielding - There are a few references to ie11 to, search /vendor/magento for .ie11 and you should find a few. IE11 isn't too bad so I doubt there will be many. From what I can see they have tried to cater for IE9 and above. I can't see much for anything else. – Ben Crook Mar 14 '17 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.