1

Recently, I have been building a website for someone and am getting irritated with some browsers rendering the website one way and other browsers rendering another way. I decided to look into why this is and discovered that the issue likely lies in the HTML engine beneath the browsers. For example, Chrome and Opera (along with most, if not all, Chromium browsers) use the Blink engine, which is a fork of the WebKit engine (which descended from the KHTML engine). Safari uses WebKit. Internet Explorer uses the Trident browser; and Edge uses the fork of Trident known as EdgeHTML. Netscape and FireFox use (or used, in Netscape's case, considering the browser is discontinued) the Gecko engine.

Considering all of this, is it possible to apply CSS to specific engines rather than browsers? Or is this already being done when we try to use browser-specific CSS? Was the point of the user agent string to do this (which apparently was messed up by the developers wanting to imitate other browsers)?

Note, I would think from comparing how these engines are related that there are 3 main engines: KHTML-based, Trident-based, and Gecko. So I am guessing that the answers on this question will give at least three different methods (one for each of the main engines).

Improve this question

2 Answers 2

Reset to default
4

Even if it was possible (using vendor prefixes) it could be a pain to maintain the code base. I suggest you to reset or normalize.

My reset is a merging of reset and normalize.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

1+, I faced the same problem even on the print preview between both browser, chrome and firefox. is it reset and normalize applied the same on print preview? thanks.
It is usually applied, but regarding how the CSS is applied in printing, it seems there are no cross-browser observed guidelines. In mobile first layouts, chrome often apply the first styles, so I specify also print in the media queries for desktops like: @media (min-width:769px), print { ... }
it worthwhile to try and learn more about them, thanks very much for responding ;)
1

You can use vendor prefixes, even target some of them via suppot queries with vendor prefixes, such as 

@supports (-webkit-appearance:none) {}

Browserhacks has a great collection of approaches for that.

That being said, you really, really shouldn't. It will be a nightmare to maintain.

Browser differences are caused by:

1) Different user-agent styles (default browser rules); Normalise or reset will take care of that for you.

2) Some experimental features that might be available just to some browser, or be different between them, normally addressed by vender prefixes; Autoprefixer such as Prefix Free or Post CSS's Autoprefixer deal with that perfectly fine.

3) Different features; knowing what you can and can't do on each will take you a long way, and whenever you find a limitation, make sure to use fallbacks or even polyfills.

99.999% can be achieved with normalise, an autoprefixer, and a decent understanding of browser features and fallbacks.

Remember your projects should work fine on all browsers (or as many as you can, no one expects to support IE6 on 2018..) but it can look and have a better experience on some / most. That's what progressive enhancement and graceful degradation are for.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.