Hi - I am new to Bootstrap and just playing with some Bootstrap 4 examples from their website. At the top of one of their examples I fond this code but no explanation why it is there or what it does - can anybody explain - thanks guys
There’s no HTML to go with it so the most I can do is just explain that snippet. This also may change depending on other cascading CSS.
It grabs an element with the class bd-placeholder-img. It could be any element. It sets the font size to 1.125rem, which likely equates to 18px font size (16*1.125). The text anchor would center a string of pre-formatted text or auto-wrapped text . Then the user-select (all the lines) basically tell the browser to not let users interact with it. The -webkit, -moz-, and -ms- are prefixes (webkit, mozilla, and microsoft) used to help out older browsers that only have the experimental prefix version working. It’s in that order so that if they get to the regular user-select: none, it will overwrite the prefixed version and use the standard version.
That all applies to every screen size. But then there’s a media query, for 768px and up, it ups the font size. People seem to love 768 since that’s a typical portrait ipad size, but try not to think of it like that .
If you link to the actual example can tell you what its actually being used for. I’m guessing its some sort of placeholder image that requires no interaction.
Thanks again all, I think the main point i see from this is that it is a compatibility fix for some browsers. I don’t really see that what they are trying to do is really needed and I don’t like having to build in fixes and patches anyway
The text-anchor middle aligns the svg text element to the middle and the user-select:none stops users from selecting it as its of no purpose. The prefixed versions are just there for older browsers.
from what I understand this is for older browser compatibility. I guess really now my question is - How do I know which bootstrap instructions are not supported on older browsers, which browsers have fixes and what are they ? Kinda confused here about the whole -webkit, -moz, -ms thing
The prefixes -webkit, -moz, -ms and others are vendor specific prefixes used in pre production for css property/values. Once the property becomes part of the specs then the pre fixes are dropped and the rule in your example becomes.
e.g.
user-select: none;
As to why bootstrap includes prefixes is down to browser support at the time. User-select is quite new and without prefixes browser support is 68% but with prefixes added then browser support is 95%.
Therefore prefixes can be useful to increase browser support (not necessarily older browser but just those that haven’t implemented the correct specs yet).
The danger of prefixes and why I hardly ever use them is that they cause code bloat and indeed should the spec change as has happened in the past then the prefixed version may be wrong (just look at IE10 and flexbox).
The second danger of prefixes is that once they are in your code you will likely never remove them when they are no longer needed.
Frameworks like bootstrap will keep an eye on prefix support and likely drop specific items when browser support is good but I guess most users will not bother once the page is coded.
If you want to know whether you should be using a prefix or not then you can look on the caniuse site I posted above and see what the current browser support is like. If support is pretty good and the property does no harm then drop the prefix. If you need the property and support is only under the prefix then you can use it with care.
I prefer not to use prefixes unless I really need the feature they support and in most cases would try to keep a graceful fallback in the design should that feature be missing.
What an awesome site SP is - why didn’t I find it earlier @PaulOB - thanks so much for your explanation and the link to caniuse.com - never heard of that site - so useful - thanks for that!
.