browser specific css | how to implement to test all browsers on 1 machine?

Browser Specific CSSImprove Compatabilitycross browser compatability

Browser Specific css

https://www.browserstack.com/guide/create-browser-specific-css

 

Every web page renders differently in different browsers. When a browser reads the code behind a website, it translates the information in the default settings. For instance, Safari and Internet Explorer have different default fonts, which means the font on a specific site changes when viewed in these browsers. Safari defaults to the Helvetica family and Microsoft’s Internet Explorer defaults to the Arial font family.

This article discusses how to create browser-specific CSS code to ensure cross-browser compatibility for a website.

Table of Contents

Common CSS Browser Compatibility Issues

Default issues are likely the most common reason for variance between browsers. When working with HTML and CSS, it is common to face browser-specific issues for the same web application. Therefore, it becomes necessary to develop browser-specific CSS code to assure a seamless user experience, regardless of the browser they use.

  • CSS Grid: CSS Grid is widely used in web design. It provides a grid framework, within which elements can be placed and properties applied as required. Given its ease of use and flexibility, CSS Grid has become a fixture among web designers and developers.

However, elements of CSS Grid do not function consistently on all browsers. For example, animated grids operate seamlessly in Mozilla’s Gecko engine but not on Chromium and Webkit.

  • CSS position: sticky: This property freezes an element on the viewport, even when a user is scrolling on the page. Usually, it is used to fix navigation bars on top of the screen. It usually works quite well with headers and navigation bars, but inconsistencies show up when it is deployed with other elements such as the header of a table. In this case, it fails in Chromium. There are also numerous inconsistencies that show up with implementing this in Safari.
  • CSS Flexbox: CSS Flexbox is widely popular, thanks to its versatile nature and its effortless ability to create a container and populate it with elements. However, users will often face issues with handling aspect ratio (height and width) within Flexbox. This usually applies to cases when they have to manage images within the containers established by CSS Flexbox. Additionally, issues also pop up when it comes to aligning items within containers on multiple elements and scales. For example, it has been noticed that visibility: collapse does not operate on the Blink engine – an instance of CSS browser incompatibility.

Read More: CSS techniques for Improved Cross Browser Compatibility

Solutions for managing Cross Browser Compatibility Issues in CSS

The most effective way to address and resolve the aforementioned issues is to write and implement browser-specific CSS code. Browser-specific code for Chrome, Internet Explorer, Edge, Firefox, and Safari is given below.

Bear in mind that once a site is ready to be tested, it must be verified and validated on real browsers and devices. Don’t limit your tests to the many inadequacies of emulators and simulators; run your code in real user conditions.

Test Websites on Real Browsers

To add Browser-specific code in CSS, it is essential to detect the browser. This can be done using CSS and JavaScript as seen in the section below.

Detect Browser using CSS and JavaScript

While detecting the browser is not a good practice because it can hinder browsers to access the website as other browsers do and relies on the browser useragent. However, you might still use it sometimes to offer a consistent user experience by doing a workaround, especially when certain CSS Features and Properties are not fully supported by the browsers.

The better way to ensure Browser Compatibility is by using Feature Detection for Cross Browser Compatibility

You can determine the browser in use just by accessing the navigator.userAgent. However, userAgent will not be able to generate the Browser Names directly, and you can use the below JavaScript code.

function whichBrowser() {
if (isFirefox()) {
return "Firefox";
} else if (isEdge()) {
return "Edge";
} else if (isIE()) {
return "Internet Explorer";
} else if (isOpera()) {
return "Opera";
} else if (isVivaldi()) {
return "Vivalid";
} else if (isChrome()) {
return "Chrome";
} else if (isSafari()) {
return "Safari";
} else {
return "Unknown";
}
}

function agentHas(keyword) {
return navigator.userAgent.toLowerCase().search(keyword.toLowerCase()) > -1;
}

function isIE() {
return !!document.documentMode;
}

function isSafari() {
return (!!window.ApplePaySetupFeature || !!window.safari) && agentHas("Safari") && !agentHas("Chrome") && !agentHas("CriOS");
}

function isChrome() {
return agentHas("CriOS") || agentHas("Chrome") || !!window.chrome;
}

function isFirefox() {
return agentHas("Firefox") || agentHas("FxiOS") || agentHas("Focus");
}

function isEdge() {
return agentHas("Edg");
}

function isOpera() {
return agentHas("OPR");
}

function isVivaldi() {
return agentHas("Vivaldi");
}

 

Code to Detect Browser using CSS

/** Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div {
display: block;
}
}

/** Microsoft Edge */
@supports (-ms-ime-align: auto) {
div {
display: block;
}
}

/** Mozilla Firefox */
@-moz-document url-prefix() {
div
display: block;
}
}

/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
div
display: block;
}
}

/** Chrominum */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
div:not(*:root) {
display: block;
}
}

 

Let’s begin with browser-specific CSS code for IE, Chrome, Mozilla, Edge, and Safari browsers.

CSS Code for Google Chrome Compatibility

logo_I All browsers behave differently and have their own type of CSS. In the case of Chrome browsers, devs need to set the WebKit pixel ratio. The code below demonstrates how to do so with various Chrome versions.

/* Chrome version 29 and above */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
selector{ property:value; }
}

 

/* Test website on real Chrome version 29 and above */

 

/* Chrome version 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
selector { -chrome-:only (;
property:value;
);}
}

/* Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
selector { property:value; }
}

 

Test your website across Chrome versions

CSS Code for Internet Explorer(IE) Compatibility

Logo_II

In the case of IE browsers, use conditional statements for CSS code. The example here uses the if conditional for all sections, like the header section, HTML elements, etc.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

/* Using conditional comments with head section CSS */
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->

/* Using conditional comments with HTML elements */
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}

/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}

/* IE6,7 */
@media screen\9 {
selector { property:value; }
}

/* IE8 */
@media \0screen {
selector { property:value; }
}

/* IE9,10 */
@media screen and (min-width:0\0){
selector { property:value; }
}

 


Developer Tip: Want to run a quick website test on legacy IE browser versions? Try now.


CSS Code for Microsoft Edge Compatibility

Logo_III

When it comes to the Microsoft Edge browser, the process is simple as it involves a simple selector that has a property value. It also provides automatic alignment, which is considered the easy way to create browser-specific CSS code.

@supports (-ms-ime-align:auto) {
selector {
property: value;
}
}

 


Popular Read: Cross Browser Compatibility Testing beyond Chrome & Firefox


CSS Code for Mozilla Firefox Compatibility

In Firefox, first use the prefix for the URL. Or, use moz-appearance to show an element using platform-native styling based on the operating system’s theme.

@-moz-document url-prefix() {
selector {
property:value;
}
}

 

Or

@supports (-moz-appearance:none) {
selector { property:value; }
}

 

CSS Code for Safari Compatibility

In the case of Safari web browsers, the media uses minimum resolution and WebKit appearance properties in the recent versions. In the previous Safari versions, it used pixel ratio for a CSS property.

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
selector { 
property:value; 
}
}}
/* Test website on real Safari 11+ */

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
selector { 
property:value; 
}
}}

/* Safari 6.1-10.0 (but not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
selector { 
property:value;
}
}}

 

Test website across Safari versions for Free

Once code has been created, it must be tested on real browsers and devices to ensure that the CSS code is rendering accurately across different browsers. The easiest way to do this is to conduct tests on a real device cloud.

BrowserStack offers 3000+ real browsers and devices for manual and automated Selenium testing. Testers can simply sign up for free, pick the device-browser-OS combination they want, and start testing their website performance. It is easy enough to see what features do not render or function on which browsers – and then backtrack to the CSS to identify and resolve the issue.

Since BrowserStack only provides real browsers and devices, testers do not have to deal with the limitations of emulators and simulators. They get instant feedback on a website’s UX as it appears in the real world.

In a world where each website is accessed through multiple browsers and browser versions, developers, testers, and organizations cannot afford to alienate users of a particular browser by letting incompatible CSS escape into production.

Incorporate the information in this article when creating CSS code for website development. It will ensure that devs and testers don’t have to work as hard to provide a positive, highly optimized user experience as part of every website they create.

Cross browser testing Manual Testing

https://www.browserstack.com/guide/css-for-browser-compatibility

 

CSS techniques for Improved Cross Browser Compatibility

 

Cross browser compatibility is mandatory in software development, as every site should function perfectly across various OS platforms and browsers. Since CSS is an essential element in developing any modern website. Given the extent of device-browser fragmentation in the world, CSS will naturally have to be compatible with multiple browsers to allow a site to render perfectly for users with different browser preferences.

CSS is a styling aspect used across websites to make them look stylistically superior. This article will explore the various CSS techniques used to improve a website’s cross browser compatibility.

Table of Contents

3 CSS techniques for Improved Cross Browser Compatibility

1. Setting gradient color on div in different browsers

Before we begin, let’s understand what a gradient is. Color gradients, or color transitions, are defined as a gradual blending from one color to another. This blending can occur between colors of the same tone (from light blue to navy blue), colors of two different tones (from blue to yellow), or even between more than two colors (from blue to purple to red to orange).

Decide carefully how to use the gradient on a website. It is better to use the gradient as an enhancement. Remember some browsers will not display the gradient well. Therefore, it will have to degrade gracefully. If a browser doesn’t display the gradient, then the design shouldn’t be dependent on it and should be able to function perfectly without it.

Gradients are applied to block elements like DIV tags. The following example uses a simple DIV tag.

Browser compatibility css with Gradients

A simple class will be set up to build the DIV that the gradient will be displayed in. The DIV will be 100px wide by 100px tall. Here is the CSS to build the DIV:

example {

border:1px solid #999;

width: 100px;

height: 100px;

padding:5px;

color:#fff;

}

 

Now let’s add the gradient to the above example using the WebKit method. WebKit is a web browser engine mainly used by browsers like Safari and Chrome. It offers features such as animation, transform, transition, and more through the use of the -webkit prefix in a site’s CSS.

background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

 

Now that you know what to do, try running this code on real browsers on BrowserStack’s real device cloud. Sign up for free, choose the real browser-device combination and run your CSS code. Choose from 3000+ real browsers and devices.

Test CSS on real browsers for free

Example:

.gradient {background: -webkit-gradient(linear, left top, left bottom, from(#314bb8), to(#1a3356));}

 

To apply the gradient for Firefox browser then take a look at the command below:

-moz-linear-gradient(start location, start color, end color)

 

Example:

background: -moz-linear-gradient(to top, #354bb8, #1a3366);

 


Read More: How to Create Browser Specific CSS Code


The CSS3 border-radius property lets developers easily use rounded corners in their design elements, without using corner images or multiple div tags. It is considered the most popular aspect of CSS3.

Browser compatibility CSS using border radiusThe code is very simple for this example:

#div1 {
border-radius: 3px;
}

 

However, one might have to use the -moz- prefix to support Firefox:

Note: -moz- prefix is not needed for Mozilla versions above 3.

#div1 {
-moz-border-radius: 3px;
border-radius: 3px;
}

 

The border-*-radius properties accept two values which are expressed as a length or a percentage. The border-radius property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Syntax:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]

 

Example:

border-bottom-left-radius: 7px 3px;
border-bottom-right-radius: 7% 6%;
border-top-left-radius: 7px;

 

Here is the code for the Firefox browser:

-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;

 

Border-radius is set at the bottom: 2px, all around. The code uses vendor-prefixed rules first, for Mozilla, Webkit, and Khtml browser.

Want to quickly check your website on different devices and browsers? Try now for FREE.

3. Setting background image for select tags in Chrome

Browser compatibility CSS with background colour

In this case, let’s use a snapshot for the background of a select-dropdown. The CSS code below works fine in Firefox and IE browser, but not in Chrome:

select {
Width: 80px;
Height: 30px;
Border: none;
Background-color: Transparent;
Background: url(image/bk_select.png) no-repeat 0 0;
Padding: 4px;
Line-height: 5px;
}

 

Solve this issue by simple adding one line above CSS styles:

select
{
…
-webkit-appearance: none;
}
rs.

 

The webkit-appearance property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open-source framework.


People also read: Did you know the difference between CSS Grid vs Bootstrap


Commonly Observed Cross-Browser Compatibility Issues

  1. One can figure out the issues with HTML and CSS while implementing features that use CSS prefixes.

  2. Older versions of most browsers do not support more recent features like HTML5 Audio/Video, FlexBox, CSS Grids, etc.

  3. Older versions of Internet Explorer do not support many CSS functionalities like CSS3 selectors, CSS3 Colors, CSS Namespaces, etc. Therefore it is necessary to know the CSS supported browsers. As per the information from Caniuse.com, browsers that support CSS are – Chrome (above 106), Edge (107, 108), Safari (above 15.6), Firefox (above 106) and Opera (92). css supported browsers

  4. Other common reasons that trigger cross-browser compatibility issues are:

    • Incompatibility of browser with the operating system (OS).Different implementations of JavaScript
    • Bugs in browsers
    • Issues with page alignment

Check browser compatibility of CSS by testing websites on real browsers. All the debugging in the world will not match up to the ease and accuracy of monitoring website behavior in real user conditions. Among many other reasons, detecting browser compatibility flaws in CSS makes cross browser testing indispensable in website development.

BrowserStack offers 3000+ real browsers and devices for manual and automated website testing. Testers can simply sign up for free, pick the device-browser-OS combination they want, and start testing their website performance. It is easy enough to see what features do not render or function on which browsers – and then backtrack to the CSS to identify and resolve the issue.

Since BrowserStack only provides real browsers and devices, testers do not have to deal with the limitations of emulators and simulators. They get instant feedback on a website’s UX as it appears in the real world.

Try Cross Browser Compatibility Testing for Free

In a world where each website is accessed through multiple browsers and browser versions, developers, testers, and organizations cannot afford to alienate users of a particular browser by letting incompatible CSS escape into production.

Incorporate the information in this article when creating CSS code for website development. It will ensure that devs and testers don’t have to work as hard to provide a positive, highly optimized user experience as part of every website they create.

https://www.browserstack.com/guide/common-cross-browser-compatibility-issues

 

Cross Browser Compatibility Issues to AvoidBy Shreya Bose, Community Contributor – May 19, 2023

In this article, we will explore some of the most common reasons cross browser test cases can fail. Consider this a list of cross-browser compatibility issues that every developer/QA needs to consider.

As it stands now, there are multiple browsers used by individuals worldwide. Additionally, each browser has numerous versions which are also in use. Any website that wants to gain a significant user base must be compatible across multiple browsers and browser versions.

This is where cross browser testing comes in. It has become an integral part of web development to ensure that a website is perfectly accessible to as many users as possible. With increasing browser availability and usage fragmentation, cross browser testing is now a basic necessity in any web development project.

Now let’s dive into the issues that are most like to break cross-browser tests.

Table of Contents

Top 7 Common Cross Browser Compatibility Issues to Avoid

1. Lack of Testing on Real Devices

As the saying goes, nothing beats the real thing. No matter what your website is like, the best way to make it bug-free across multiple browsers and devices is to test on real browsers and devices, like real users. No virtual machine will ever be able to match the efficacy of native device features.

However, real device testing can prove quite difficult and expensive if a tester has access to a personal device lab that is constantly updated with the newest devices and browser versions. Platforms like BrowserStack address this need gap by providing instant access to a real device cloud with 3000+ device browser combinations.

Solve browser compatibility issues on BrowserStack Live

Simply test your website’s compatibility and responsiveness by logging in and selecting device-browser combinations of your choice. The user does not worry about updating or maintaining anything; they choose what they want to test on.

Try Testing on Real Devices

2. HTML/ CSS Validation

Validation of HTML and CSS codes can pose major problems for developers during cross browser testing. This is to be expected since different browsers read and handle code differently.

An error as minute can hinder developers as not closing a tag. Certain browsers might auto-correct this, while others might not be able to display the feature that part of the code operates. Committing such errors might cause problems with, for example, Internet Explorer and not Chrome.

Solving this issue is fairly simple, thanks to code-validating tools for HTML and CSS. Consider using W3C HTML validator and Jigsaw CSS validator.

3. Vendor-specific functions

Developers must note that while creating features/functionalities, they must use specific code in CSS, depending on which browser they are designing for.

Doing the above is integral to avoiding cross-browser compatibility issues. The developer must also add the function without the prefix, thus ensuring no error occurs in other browsers.

Some common prefixes to keep in mind are:

  • Safari and Chrome (-webkit)
  • Internet Explorer (-ms)
  • Mozilla Firefox (-moz)
  • Opera (-o)

4. DOCTYPE Error

This usually involves faulty rendering due to missing a basic line in the code. Browsers with outdated versions such as Internet Explorer 8.0, often check for the Doctype. If that is missing, the site is improperly rendered.

Doctype is checked because a browser operates in two modes – Strict Mode and Quirks Mode

  • In Strict Mode, the browser works with much stricter checks for code errors to ensure that the code matches W3C specifications.
  • Quirks Mode provides backward compatibility to older browser versions and do not perform such meticulous code error checks.

In case a webpage features a missing Doctype tag, the browser goes into Quirks Mode. Simultaneously, if the browser does not support HTML5, it won’t know which version to look for. Consequently, some tags will become unresponsive, and the webpage will be displayed incorrectly.

It is simple enough to solve this. Just include a single line at the beginning of the codebase.

!DOCTYPE html

 

Do this, and receive a flawlessly rendered site in every browser.

5. Outdated Browser Detection

Since browsers contain technology to optimize output, this results in less consumption. At times, if an old browser is used, Javascript may have failed to detect the browser.

This common cross browser compatibility issue occurs due to obsolete Javascript.

Solution : However, one can remove the browser detection by using Modernizer, a set of “superfast tests” that enumerate all browser features, thus facilitating a seamless experience. Modernizer lets developers direct a site to focus on features rather than browsers.

6. Missing CSS Resets

By default, all browsers have a design layout applied to the website opened in them. A website must override its default if it wants to utilize its layout. Unless this is done, a website is rendered differently, depending on which browser is running it.

Solution : Resolving this issue requires the websites rendered to be reset to the same basics. Developers can use CSS reset style sheets for this purpose. Adding the style sheet ensures that layout design issues do not occur.

Commonly used reset style sheets include Eric Meyers CSS Reset, HTML5Reset, and the Github based Normalize.css.

7. Layout Compatibility

By applying CSS Resets, developers often remove the default design in browsers and apply their own. This can cause compatibility issues due to a non-responsive design or a lack of support for specific layouts on certain browsers/browser versions.

Solution : A common solution is using floats supported by many browsers. Now, since a float is essentially a floating image inside a text box, it does offer certain limitations.

It is better to use tools such as CSS grids and Flexbox when working with modern layouts. Since most modern browsers support these tools, they are more effective for developers’ purposes.

6 Common Cross Browser Compatibility Testing Issues to avoid

Share this Image

 

8. Browser-specific features

Browser-specific features in compatibility testing refer to functionalities or behaviors that are specific to a particular web browser.

Different browsers use different rendering engines (e.g., Blink, Gecko, WebKit), and each has its way of interpreting and displaying web content, so it’s important to test how the website or application is rendered in each browser.

Solution: Verify the website’s layout, design, and interactivity remains consistent across different browsers such as Chrome, Firefox, Safari, Internet Explorer, and Edge. Testing on both desktop and mobile versions of browsers may also be necessary.

9. Media formats and Codecs issues

Some browsers may support popular formats like MP4, WebM, or Ogg for video, while others may have limitations or require additional plugins. Different browsers and devices may support different codecs, and compatibility issues can arise if a specific codec is not supported.

Solution: Compatibility testing verifies that the media files encoded with different codecs are played back correctly and consistently across the supported platforms. It also checks to handle different image formats, such as JPEG, PNG, GIF, or SVG.

By keeping the issues detailed above in mind, developers and testers are more likely to avoid them in the first place. Since cross browser testing is of such immense significance, mistakes in it can cause perfectly avoidable delays. By ensuring these failures do not occur, browser compatibility testing can become a legitimate enabler, rather than a bottleneck in the software development process.

Scroll to Top