I've been using white-space and was happy with it. Still am. Then, I noticed that there's something called text-wrap too. I've seen somewhere on the internet that there's no browser support for the latter. However, it's not in the plans for the future nor is it deprecated (let alone obsolete).
So what's that for? Should I regard it in any way?
text-wrap was originally in CSS Text level 3. It has since been deferred to level 4. The difference between it and white-space is that white-space is changed to be a shorthand of two other properties, one of which is text-wrap. That's all you need to know for now; any other details are highly subject to change and simply not relevant at this point.
You can disregard text-wrap for now. W3Schools is correct in stating that no browser supports it at the moment. You can also continue using white-space as normal; its syntax will not change even once the newer version is implemented by browsers.
Related
In CSS, we have been introduced the new property text-align-last property to align the last line, but to me, this is going out of the regular flow of CSS. We already have pseudo-element selectors like ::first-line, so instead of implementing text-align-last property, a pseudo-element selector i.e. ::last-line could have been introduced where we could do more than just aligning the text.
Agreed! Your suggestion would make sense. It's consistent and it would also match the other pseudo elements like :first-child and :last-child.
Maybe you could suggest it to W3C?
They have an archived mailing list www-style#w3.org. You could subscribe yourself and take part in discussions:
https://lists.w3.org/Archives/Public/www-style/
More info for if you want to help/participate can be found here:
https://www.w3.org/Style/CSS/current-work
Your question is similar to: why did we invent big calculators and big PC when we could have invented the powerful small laptops we have now?
text-align-last was created for a purpose and a need that has emerged: to only align the last line.
What you are asking for is a different thing: A selector to select the last line to apply CSS. Maybe it will come in future and maybe not. It depends if we really need it and if the communit ask for it. It make look trivial for you but it's not. A lot a feature were never implemented until now due to a lot of limiation. the :has() selector was introduced since more than 5 years now and we still have no support for it due to many implementations limitation.
This is how CSS worked since the beginning.
Why having :first-child\ :last-child if we can do everything with nth-child(n) ?
Why having top,left,right,bottom if we can use only inset?
etc
This is the evolution of CSS.
In CSS Text Decoration Module Level 3, there’s text-decoration-skip. It does magic like this:
This representation is allegedly produced by using text-decoration-skip: ink;. For web typography, it’d be great if descenders are no longer struck through by native underlining.
There’s an entry at CSS-Tricks and more recently also one on MDN. There, it says it’s “not on a standards track”. Is that right? The property is listed in the W3C Candidate Recommendation.
How can I use text-decoration-skip? Or when? Are there flags to enable it?
As someone said in the comments to the question, there's no saying when and how it will be implemented.
For reference anmd clarification, the origin article of the picture you posted isn't what the actual spec necessarily will look like, but a draft of what Marcin Wichary had in mind when tinkering with it. So don't make the mistake and consider that image a reference for the CSS3 output, as it may look entirely different when finally implemented.
I also can't tell you why MDN doesn't list it as a feature necessarily to be implemented, whether it's a decision of the development team not to implement it, or they just missed it. I can, however, tell you that they are correct in saying "This property has not yet been implemented in any modern browser."
As for browser support, take note of this comment in the CSS-Tricks article, linking to the folliowing image:
It's not only interesting because that's quite a dated browser (which of course didn't do this because of some CSS3 spec, but likely because they had the same basic idea), but also because that's likely what the property will look like when finally implemented.
While text-decoration-skip seems to have been “deferred to Level 4 to allow for major changes”, Chrome 64 (2018-01) and Firefox 70 (2019-10) implemented a close relative (applied by default), because “most other browsers are converging on supporting the simpler text-decoration-skip-ink property”, and it certainly does work:
u{font-size:444%;}
u:first-of-type{ text-decoration-skip-ink: none; }
u:last-of-type{ text-decoration-skip-ink: auto; }
<u>parapsychologists</u>
<br>
<u>parapsychologists</u>
Note that there’s even more cutting-edge text-decoration stuff, like text-underline-offset or text-decoration-thickness.
I am working on styling my <blockquote> but I am not able to find a complete reference that would let me check what is available to me (newbie here).
For example, "box-shadow" property. How to check if I can define for <blockquote> or not? Trial and error?
You can apply any CSS property to any HTML element.
Some inline elements don't support properties of block level elements(i.e. padding on <span>), but you can easily overcome that restriction by defining them block or inline-block
Most documentation you'll find is extraordinarily dense and reads like the specifications. As someone who is learning, my best advice to you is to test it out, make the mistakes and learn from them! You'll spend far less time here waiting for an answer you can test yourself in seconds.
That being said, the Mozilla Developer's Network has (IMHO) the easiest to absorb documentation around.
P.S. yes, you can use box-shadow on blockquotes
Here is the official list of all properties: http://www.w3schools.com/cssref/
I do also like this list: http://www.blooberry.com/indexdot/css/propindex/all.htm
While there may be some specific attributes that work best with some specific block, the general rule is that you can apply any property to any element. The result may vary from a browser to another.
Please note that some browsers support their own set of properties.
I recently looked at the following question:
How to disable text selection highlighting using CSS?
Which nicely provided the answer to the immediate CSS problem I was facing. However, it made me wonder, how do you determine when it is safe to drop all the browser specific prefixes for CSS properties?
I know how the mechanics of this work, older browsers which require a prefix will of course always need a prefix, so I suppose the answer really depends on the browser usage statistics.
Is there a decent, simple, source of reference that can be used to determine whether all these prefixes are really required for a CSS property, e.g. if I use the user-select property without prefixes, I can guarantee 95% of browsers will interprit this correctly.
This is an excellent summary of browser support for pretty much every CSS property.
However, I tend to use the browser-specific prefixes, as well as the non-specific rule, no matter what - it's not exactly much extra work and it will mean those few people stuck on outdated browsers still see the page as you intended.
One good resource I've used for this sort of thing is http://caniuse.com/. In general, it is not a bad idea to have a list like, for example,
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
For the space of a few lines, this ensures that older browsers will get the right browser-specific rules if they require them, and that newer browsers get the standards-compliant rule.
Edit: Well, I noticed that the resource to which I linked does not have an entry on user-select. Oops!
I've found this to be the best resource for that:
http://www.w3schools.com/cssref/css3_browsersupport.asp
Should the following be shunned, or praised for its simplicity?
For the record, I use it in every site I build, but I've noticed it's not present in many main-stream CSS-reset frameworks — is there a reason they don't use it too?
* { margin: 0; padding: 0; }
Its best NOT to use it as it causes issues with form elements, especially input buttons and select boxes.
See christianmontoya.com
The universal selector can slow things down quite a bit, especially on some WAP browsers. Just think about it for a second: it matches every single element in the document tree.
Besides, for most elements, you'll go on and specify a margin/padding that is different from 0 anyway. As in, there's no point in resetting them for all elements to begin with.
Something you definitely don't want to do is use relative sizes with the universal selector. Things get weird really quick if you do. ;-)
For a good baseline to work from, I'd recommend a tried and tested reset stylesheet.
I once did some performance testing between the * {margin:0;padding:0}, Eric Meyer's reset, the YUI reset and no CSS at all. The performance difference was negligible.
That said, I now use Eric Meyer's reset so I don't lose the formatting on input buttons which actually makes buttons easier to style cross-browser.
If your intent is to set the padding and margin of every single element, then there should be no problem with that selector.
There's nothing particularly wrong with it. * is referred to as the "universal selector", and browser support for it is generally considered to be good, though IE does have some obscure bugs, as usual:http://reference.sitepoint.com/css/universalselector#compatibilitysection
I consider it an important first step in building my CSS layouts. It removes a lot of the troublesome default styling of different browsers and allows me to get more browser-independent results.
Of course I couple it with IE's conditional comments to write IE-version-specific divs around my whole page, and use those to work with IE's bugs (as FF et. al. tend to be more accurate to CSS spec).
EDIT - and I've never noticed any performance problems with it.