3 ms·

> browsers are still inconsistent with respect to how they treat CSS Are they? CSS seems to be rock-solid and consistent now. The days of IE6 randomly breaking

> browsers are still inconsistent with respect to how they treat CSS Are they? CSS seems to be rock-solid and consistent now. The days of IE6 randomly breaking the box model are far behind us.

nessunodoro 7y ago
grid and flexbox are still not carved in stone, so catering to tbe lowest common denominator sometimes means e.g. nesting divs to mimic functionality in another browser
henriquez 7y ago
Yes, some examples: - margin-top inconsistent between Firefox and Chrome in some cases, usually near the start of a container element. - specifying percentage height for absolutely positioned elements inconsistent in some cases between Firefox and Chrome (bugged in Chrome) - SVG elements or CSS backgrounds are handled inconsistently by Chrome, Firefox and Safari. Which can depending on the use case can lead to issues like exceeding max-width, failure to apply aspect ratio, or in the case of Safari full page reflows every frame where an SVG is animated. - Chrome incorrectly renders any scrollable element with backface-visibility: hidden. Requires non-scrollable nesting div. - Everyone has a different way of specifying custom scrollbars. On some platforms you need to leave room in any scrolling design for a scrollbar which will reliably be an unpredictable width. Chrome and Firefox still have inconsistent non-standardized css proprties. Or (some) Apple users get the self-hiding scrollbar. In practice this needs to be detected and fixed after the fact with Javascript. - position: sticky unusably broken in Safari I'm sure there are others, but my point is the browsers are quirky and better to just face it and get over it.
nwmcsween 7y ago
CSS is still a big mess of hacks if you try to have consistent styles across browsers, it's not ie 7 zoom level hacks but you still need various extra properties to make things work.

> browsers are still inconsistent with respect to how they treat CSS Are they? CSS seems to be rock-solid and consistent now. The days of IE6 randomly breaking the box model are far behind us.

nessunodoro 7y ago

grid and flexbox are still not carved in stone, so catering to tbe lowest common denominator sometimes means e.g. nesting divs to mimic functionality in another browser

henriquez 7y ago

Yes, some examples: - margin-top inconsistent between Firefox and Chrome in some cases, usually near the start of a container element. - specifying percentage height for absolutely positioned elements inconsistent in some cases between Firefox and Chrome (bugged in Chrome) - SVG elements or CSS backgrounds are handled inconsistently by Chrome, Firefox and Safari. Which can depending on the use case can lead to issues like exceeding max-width, failure to apply aspect ratio, or in the case of Safari full page reflows every frame where an SVG is animated. - Chrome incorrectly renders any scrollable element with backface-visibility: hidden. Requires non-scrollable nesting div. - Everyone has a different way of specifying custom scrollbars. On some platforms you need to leave room in any scrolling design for a scrollbar which will reliably be an unpredictable width. Chrome and Firefox still have inconsistent non-standardized css proprties. Or (some) Apple users get the self-hiding scrollbar. In practice this needs to be detected and fixed after the fact with Javascript. - position: sticky unusably broken in Safari I'm sure there are others, but my point is the browsers are quirky and better to just face it and get over it.

nwmcsween 7y ago

CSS is still a big mess of hacks if you try to have consistent styles across browsers, it's not ie 7 zoom level hacks but you still need various extra properties to make things work.