3 ms·
My favorite obscure thing: you sometimes had to add the zoom:1 CSS declaration so the element would "have layout", Whatever that meant, so it behaved the way yo
by jraph 5y ago
My favorite obscure thing: you sometimes had to add the zoom:1 CSS declaration so the element would "have layout", Whatever that meant, so it behaved the way you wanted.
You also had the various filter: progid:DX… declarations to make things that came with other browsers work on IE using DirectX directives. This would, by the way, break the CSS syntax because of the colon in the value, but fortunately parsers of other browsers would recover at the right place.
You could also run arbitrary JS in this filter property, too. I don't know how this would have worked with CSPs today.
To add to the confusion, the filter property has since been repurposed, and the modern one is NOT related to the older, IE one.
One of the biggest issues at the time was the non-standard box model that IE used and there was no way to tell other browsers to use this box model, nor to tell IE to use the standard box model.
Now both can be used in any browser with box-sizing:border-box (the IE box model) or box-sizing: content-box (the default standard box model). I guess browsers needed to implement border-box for the quirks mode anyway.
Conveniently, IE would happily load specific stylesheets declared in "conditional comments" so it could be possible to fix some things. Or you could use weird syntax like prefixing property names by a star, that the IE CSS parser would not mind but the other browsers ignore. Each version of IE had its specific quirks in its CSS parser so it was possible to target one version or another. Which is fortunate, because the rendering engine behaved very differently from version to version.
- goldenkey 5y agoThe box-sizing property is actually very useful for when you want to reserve space in a percentage sized element with different sizing units. For example (in SASS CSS): .container { $footer-size: 2em; box-sizing: border-box; height: 100%; padding-bottom: $footer-size; .footer { position: absolute; bottom: 0 left: 0; height: $footer-size; } } Otherwise, one would have to use calc() which isn't supported in older browsers.
- jraph 5y agoAbsolutely. By the way, it seems many frontend developers generally prefer box-sizing:border-box, and Bootstrap sets it for all elements by default. Which can be a little disturbing when you don't know it, work on a project that includes bootstrap and you expect content-box. Fortunately, browser dev tools are good at telling you what is going on.
- goldenkey 5y agoThanks, I wasn't aware of this disparity. I handwrite my CSS, been doing it for 21 years now. If I was to use Bootstrap or Tailwind, I'd likely use @extend and @include to compose my own classes. A long time ago, I read an article that stated, with authority, that Bootstrap was being misused. That class names like "font-weight-light mt-4 text-white" should instead have been replaced with "subtitle" with CSS: .subtitle { @extend .font-weight-light, .mt-4, .text-white } The article resonated with me. This approach avoids mixing HTML/CSS concerns and also avoids polluting the CSS namespace. Even if tree shaking and css pruning is applied, I believe this approach would win out in performance for having less classes. I would be wrong if there are tools that will run through HTML and CSS and transform the long bootstrap class attributes into consolidated, shared classes. Global classes, like in Bootstrap, also violate web component encapsulation. Global CSS classes are kind of like global variables in programming languages (like PHP.) Sure, they work and used to be common, but we've since moved on to closures and scope containment for performance and reliability.
- jraph 5y agoI thought this when I first encountered Bootstrap, and it is still my opinion today. I think class names should convey intent and meaning, not the look. I'm glad someone wrote on this. People seem to like bootstrap, but it seems with bootstrap, not only you have to master CSS, but also bootstrap, while without it you only need to master CSS. I'm also used to hand write CSS and I'm a bit at loss when I need to use such CSS frameworks. It seems that some people find it easier to deal with CSS with Bootstrap (including people who don't really like CSS), but haven't really understood this to this day. I know the default behavior of a web page pretty well, but as soon as bootstrap is there, this knowledge is partly gone and my assumptions are broken. It just makes my life a bit harder. This would be fixed by learning Bootstrap properly but I just don't see the appeal, especially that I noticed defaults that I don't like (the sizing for headings for instance). It does not seem to solve a problem I have. It does provide interesting components like popovers though.
- jazzjazz 5y ago