Home Specs Ideas Testing About
You are here: CSS Working Group Wiki » Frequently Asked Questions

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
faq [2018/02/03 00:24] – [Selectors that depend on layout] florianfaq [2021/02/26 10:23] – [Real Physical Lengths] tabatkins
Line 1: Line 1:
 ====== Frequently Asked Questions ====== ====== Frequently Asked Questions ======
  
-===== Styling <sup> and <sub> using font-variant-position =====+===== Styling <sup> And <sub> Using font-variant-position =====
  
 === Question === === Question ===
Line 71: Line 71:
  
  
-===== Selectors that depend on layout =====+===== Selectors that Depend on Layout =====
  
 === Question === === Question ===
Line 137: Line 137:
 then we can never add another selector that would depend on other properties ever. then we can never add another selector that would depend on other properties ever.
 Which one goes first? Which one goes first?
 +Something that we can only do once, ever,
 +and that will affect our ability to evolve CSS in the future,
 +is probably a bad idea for the language.
  
 Yet another way you could try to remediate all this Yet another way you could try to remediate all this
Line 147: Line 150:
  
 Instead of doing all of this, so far we've just short-circuited the entire debate and disallowed selectors from being affected by properties. Instead of doing all of this, so far we've just short-circuited the entire debate and disallowed selectors from being affected by properties.
 +
 +== Why Doesn't This Argument Apply To :hover? ==
 +
 +A common retort to the above is "we already have :hover, which has circularity issues, why can't we add this?".
 +
 +First, the fact that we've made one mistake isn't an argument for repeating the mistake. :hover *is* problematic in implementations, and we'd prefer not to add more things like it.
 +
 +Second, and more important, the circularity of :hover is very "wide" - when you apply :hover rules, you get all the way thru styling, then layout, then painting, and finally to hit-testing before you realize the element isn't hovered anymore and have to go re-style.  The user gets to at least see the full results of hovering before the engine has to figure things out again.  This is different from most other circular pseudo-classes, which circle around after just styling or layout, before the old results are even presented to the user.  This would effectively freeze the page, as the layout engine isn't even allowed to complete a single full run before it gets restarted.
 +
 +Furthermore, hit-testing is easy to for UAs to "tweak" to mostly get around the hover problems - UAs generally don't rerun hit-testing until the user moves their pointer, so as soon as they stop moving it, it settles on one rendering or the other.  Again, this isn't the case for other circular pseudo-classes.
  
 === References === === References ===
Line 173: Line 186:
 it is to browse the web as it exists, it is to browse the web as it exists,
 not as we would like it to be. not as we would like it to be.
-Whether authors correctly used well designed features, +Whether authors correctly used well-designed features, 
-correctly used poorly designed features,+correctly used poorly-designed features,
 used features in creative or weird ways, used features in creative or weird ways,
 or even accidentally depended on some bizarre behavior, or even accidentally depended on some bizarre behavior,
Line 221: Line 234:
   * https://lists.w3.org/Archives/Public/www-style/2018Jan/0061.html   * https://lists.w3.org/Archives/Public/www-style/2018Jan/0061.html
   * https://lists.w3.org/Archives/Public/www-style/2018Jan/0062.html   * https://lists.w3.org/Archives/Public/www-style/2018Jan/0062.html
 +
 +===== Error Handling in Selectors, aka Breaking Pages by Making Them Work =====
 +
 +=== Question ===
 +
 +When a selector has a syntax error in it, or when it has new syntax that old browsers don't know about, the entire selector is dropped. CSS would be more robust and maintainable if the browser only dropped to the next comma.
 +
 +Take this code:
 +
 +<code css>
 +#sensible .selector,
 +syntax = !error,
 +:new-feature {
 +  background: red;
 +}
 +</code>
 +
 +Because of how selectors are parsed, this is not applied at all.
 +Wouldn't it be nicer if it could apply to elements that match ''#sensible .selector'',
 +also apply in up to date browsers to elements that match '':new-feature'',
 +and just skip the syntax error?
 +
 +=== Answer ===
 +
 +Broadly speaking, this is impossible for the reasons explained in [[https://wiki.csswg.org/faq#versioning-css-fixing-design-mistakes | Versioning CSS, Fixing Design Mistakes]]:
 +changing how CSS works breaks existing content,
 +and that goes against everybody's interests.
 +
 +== more details ==
 +However, this particular case it interesting. If we did this change, all previously valid pages would continue to work, so what's the problem?
 +
 +It turns out that since mistyping a selector is an easy mistake to make,
 +lots of people have made it.
 +Moreover, when a page doesn't quite look the way the author expected,
 +a common strategy is to write more CSS rules until it does,
 +rather than trying to understand why the existing rules do not create the expected result.
 +
 +Then, when the page looks good, the author ships it,
 +including all mistaken cruft that doesn't do anything.
 +This dead code might even survive later redesigns.
 +
 +Effectively, even though it is not intentional,
 +many pages which have been fixed through additional css declarations
 +now depend on this sort of cruft not to work.
 +More often than not, “randomly“ changing the background,
 +the size, the borders, or the display value of some elements in the page will break it badly.
 +It doesn't matter that the source of the “randomness“ is the author's previous mistakes.
 +
 +And so, even though most people agree that error handling at commas in selectors would be nicer,
 +this is not something that can be changed.
 +
 +=== References ===
 + TBD
 +
 +===== Adding more named colors =====
 +
 +=== Question ===
 +
 +Can we add new named colors to CSS?
 +
 +
 +=== Answer ===
 +
 +No.
 +
 +== more details ==
 +
 +The built-in set of named colors in CSS is weird and bad, and we keep them mainly for legacy interop reasons. There's very little utility to adding to a set of colors where you have to look up the proper spelling and remember what actual colors the names map to.
 +
 +Naming colors can be done in stylesheets using custom properties. It is not likely we will ever add more names to the built-in set.
 +
 +=== References ===
 +
 +  * https://github.com/w3c/csswg-drafts/issues/3192#issuecomment-427132614
 +  * https://www.youtube.com/watch?v=HmStJQzclHc
 +
 +
 +===== Real Physical Lengths =====
 +
 +=== Question ===
 +
 +A '1in' length usually isn't actually 1 inch. Can we get physical units that are the correct size, so we can create rulers/etc on webpages that actually work?
 +
 +=== Answer ===
 +
 +Currently, no.
 +
 +This has been tried in the past, in several variants. Originally, all the "real world" units were meant to be accurate physical measurements.  However, in practice most people authored content for 96dpi screens (the de facto standard at the time of early CSS, at least on PCs) which gave a ratio of 1in = 96px, and when browsers changed that ratio because they were displaying on different types of screens, webpages that implicitly assumed the ratio was static had their layouts broken. This led us to fixing a precise 1in:96px ratio in the specs, and the rest of the physical units maintained their correct ratios with inches.
 +
 +Later, Mozilla attempted to address this again, by adding a separate "mozmm" unit that represented real physical millimeters. This ran into the second problem with real physical units - it relies on the browser accurately knowing the actual size and resolution of your display. Some devices don't give that information; others lie and give info that's only approximately correct. Some displays literally *cannot* give this sort of information, such as displaying on a projector where the scale depends on the projection distance. Authors also used mozmm for things that didn't actually want or need to be in accurate physical units, so when mozmm and mm diverged, they were sized badly.
 +
 +The overall conclusion is that trying to present accurate real-world units is a failure; browsers can't do it reliably, and authors often misuse them anyway, giving users a bad experience.
 +
 +=== Workarounds ===
 +
 +There's a reasonable workaround strategy, however. If you are writing a webpage that does need accurate real-world units, such as a webapp that wants to help people measure things, you need to do per-device calibration:
 +
 +  - Have a calibration page, where you ask the user to measure the distance between two lines that are some CSS distance apart (say, 10cm), and input the value they get.
 +  - Use this to find the scaling factor necessary for that screen (CSS length divided by user-provided length), and store it locally (via localStorage, or a cookie, etc).
 +  - On the pages where you need the accurate length, fetch it from local storage, and set a ''--unit-scale: 1.07;'' (subbing in the real value) property on the html element.
 +  - Anywhere you use a length that needs to be accurate, instead of ''width: 5cm;'', write ''width: calc(5cm * var(--unit-scale, 1))'';.
 +
 +This is a robust and minimal scheme that is guaranteed to give correct results on a given device, and "fails open" - if the user hasn't calibrated yet, or has cleared their local storage, etc, the ''var()'' will fall back to 1 and you'll just get the standard browser units.
 +
 +(Note: a common follow-up request is to bake this unit-scale-factor into a CSS property that auto-scales all lengths for you. You don't actually want this - calibrating a ruler shouldn't rescale your UI as well.)
 +
 +=== References ===
 +
 +* https://github.com/w3c/csswg-drafts/issues/614
 
faq.txt · Last modified: 2023/09/21 04:45 by SebastianZ
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki