The W3C maintains an excellent list of all CSS properties, both current and proposed. Of the 115 properties marked as CSS 2.1, sixteen of these are not part of any CSS module (for level 3 and above). These are:
azimuth,
elevation,
line-height,
page-break-after,
page-break-before,
page-break-inside,
pitch,
pitch-range,
play-during,
richness,
speak-header,
speak-numeral,
speak-punctuation,
speech-rate,
stress,
volume
Now I'm aware of the W3C statement, from CSS Snapshot 2015 that states "Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions." However there seems to be no upgrade path or list of deprecated properties.
I'm pretty sure modern browsers, will, for backward-compatibility reasons, choose to honor the well-defined and stable CSS 2.1 properties. But someone (perhaps the folks in charge of a particular module) decided that the CSS 2.1 properties were clunky, hacks, or otherwise did not fit into the clean world of CSS 3 modules.
For example, I searched the CSS Speech Module looking to see whether speak-numeral (one of the missing 16) was mentioned. It wasn't, but I found speak-as which appears to capture the same functionality.
So the programming and programming-related questions here are:
Why are these 16 properties not marked deprecated?
Is there an "upgrading to CSS3" guide somewhere?
What is the appropriate strategy for new web applications? Do we continue to use these old properties until the module makes Recommendation status and/or they get better browser support? Is it a good idea to use both properties (old and new) in a style sheet?
Let's take one example, I suspect by far the most commonly used of those listed, line-height.
The CSS Inline Layout Module Level 3, Section 2. Line Heights and Baseline Alignment says
This section is being rewritten. Refer to section 10.8 of [CSS2] for
the normative CSS definition or the 2002 Working Draft if you want
pretty pictures. (But ignore the old text, half of it’s wrong. We’re
not specifying which half, that’s to be determined.) The CSS2
specification should be used as the guideline for implementation.
So it's not deprecated, it's just that the description from level 2.2 holds until such time that a level 3 definition can be written. Level 3 is huge, and work has to be prioritized. Line-height obviously works well enough for that priority to be low. No doubt, it will be addressed eventually.
The others are probably similar. Their level 2 definitions have simply not yet been superseded.
Related
I can't understand what is point in the CSS selector's levels. and I want to know the answer.
I have a reference about it but i can't figure it out how this works or how they relate to each other??
From the specification
Cascading Style Sheets does not have versions in the traditional sense; instead it has levels. Each level of CSS builds on the previous, refining definitions and adding features
In CSS, each new level is adding new feature to the previous one. As simple as that. Starting from the CSS Level 3 this logic will be applied to each module:
CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification. The CSS Working Group intends that the new CSS modules will not contradict the CSS2.1 specification: only that they will add functionality and refine definitions. As each module is completed, it will be plugged in to the existing system of CSS2.1 plus previously-completed modules.
From this level on modules are levelled independently: for example Selectors Level 4 may well be completed before CSS Line Module Level 3. Modules with no CSS Level 2 equivalent start at Level 1; modules that update features that existed in CSS Level 2 start at Level 3.
CSS selectors Level 4 is the latest Specification written for CSS selectors and it's an improvement of the Level 3. You can clearly see that each level is adding new selectors.
You don't really need to bother with Levels. All you need to know is the selectors and how to use them and especially their browser support. (a useful tool that can help you: https://caniuse.com/)
Below the Specification of each level:
https://www.w3.org/TR/selectors-4/
https://www.w3.org/TR/selectors-3/
You can also find at the end of the last specification a section called Changes Since Level 3
CSS selectors are just different ways to select an element to apply some styles to it. As you can see here there are 4 levels and level 4 still seems to be in working draft status.
I can't understand what is point in the CSS selector's levels
Well, these new selectors will help in selecting elements that might be difficult to select with the existing selectors.
For example, the attribute case-sensitivity looks interesting as we can select in a case-insensitive way:
[attribute='value' i]
Time and time again I'm reading about a very interesting CSS property on MDN only to see that MDN considers some values it can take "experimental", recommends against using it in production and warns that its behavior may change in the future.
Two examples: width: max-content and display: contents.
What does it precisely mean that a property or value is 'experimental'? Is it a status given to such a keyword by MDN or is it an official status given to this keyword by an appropriate standarization body (W3C perhaps?)
Where can I find if MDN's warnings are not out-of-date? For example for max-content, MDN links to this standard document, but I can see no warnings about the experimental nature in the paragraph about max-content - perhaps the whole document MDN linked to is experimental?
Context: I'm asking because I'd dearly like to use both width: max-contents and display: contents, both seem to make my life so much simpler, and I'm wondering if (a) it's OK to use them, (b) I shouldn't use them, (c) I really really shouldn't use them?
Basically what this means is that the developers that make it so that CSS works are creating new functions that aren't available in every major browser and very-well could be removed as they continue to develop. Think of it as an alpha test of new CSS declarations. In theory, every CSS identifier was 'experimental' at some point and was then moved to 'stable.' Eventually if it falls out of favor, it turns to 'deprecated.'
You can find more info here: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions
Here is a site that allows you to see cross-browser compatibility as well: https://caniuse.com/
At the very beginning of your linked document (CSS Box Sizing Module Level 3
Editor’s Draft, 5 June 2019), there is this paragraph
[...]This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.[...].
So as long as a css property is only listed in the draft of the specification it has to be considered as experimental, as it is not even guaranteed that it will be finalized ever. Drafts have been completely rejected or had a major rewrite in the past if they were not practicable.
And if you look at this link https://www.w3.org/TR/css-sizing-3/ you can see that the current version of CSS Intrinsic & Extrinsic Sizing Module Level 3 is still W3C Working Draft, 22 May 2019.
[...]This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress[...].
So to figure out if a property or value is still experimental you need to check where it is defined and if those specs are final.
If those specs are final then the property/value is not experimental anymore and you only need to check if it is available in the browsers using e.g. caniuse.com
I have come across this while going over CSS specifications on W3C. Now according to wiki page, this is part of level 3. However, I have the following two questions
No where in the document it says it belongs to level 3. Does "style attributes" really belong to CSS level 3?
I did quite a bit of Googling for "style attributes" however I cannot find any articles to explain what exactly this document is about and how it differs from CSS2.1 to CSS3. Could somebody either explain to me the nature of this document or provide a link to an article that explains it?
Thank you
I don't think this is related to css3. I think it's simply talking about inline styles.
We have internal, external and inline styles so this probably the 3rd one - inline.
http://www.expression-web-tutorial.com/Types_CSS_Styles.html#.Vip3XWcrJNA
http://www.w3schools.com/css/css_howto.asp
Originally, the generation of specifications that came after CSS 2.1 was CSS 3. But whereas CSS 1 and 2 were monolithic, CSS 3 was modularized to allow different parts of specification to progress at their own rates. CSS Style attributes became one module within that.
Now, the point of modules progressing at their rates is that some parts will go through several generations, while during the same time, other parts will go through fewer or even none. So it makes little sense for the modules to refer to themselves as CSS 3 or 4 or whatever.
Instead, think of CSS 3 as an umbrella term to cover the CSS specifications in modular form. Each module in turn will have its own versioning, which may simply be the date of publication.
I am not able to understand the concept of modules. What are these modules and how are they different from CSS2? Can anyone explain these modules in a simple better way? And why these modules make CSS3 different from CSS2 ?
CSS level 2 is a monolithic specification. You have a single specification divided into sections, with each section describing a basic component of the CSS formatting model, for example:
Selectors
Cascading and inheritance
The box model
Colors and backgrounds
Fonts
The definitive CSS level 2 standard is CSS2.1, or CSS level 2 revision 1, which became a recommendation in 2011 following a set of changes to the 1998 standard for enhanced interoperability. The CSS2.1 specification can be found here (with the examples above linking to individual sections).
Post-CSS2 you have modules, which are basically various sections of CSS2 split into their own specifications. The above examples from CSS2 have the following corresponding modules:
Selectors
Cascading and inheritance
The box model
Colors and backgrounds (yes, that's one section split into two modules)
Fonts
This means you have multiple specifications that all pertain to CSS, each with its own independent development path. This consequently means that different modules can progress toward implementation and standardization at different rates, without having to depend on the rest of CSS as a language (which was the primary cause of CSS2.1 taking so long to become a recommendation following CSS2's standardization). These specifications are collectively known as CSS3, or "CSS level 3", although each goes through levels on its own, making it somewhat of a misnomer.
CSS3 and its modularization system are explained in greater detail in this other answer.
CSS Level 2 is "a specification"
CSS Level 3 is "a collection of specifications". Each specification (module) defines a (largely) self-contained set of related features, such as borders and backgrounds.
This allows the various specifications to progress to recommendations without having to wait for everything else.
What is the difference between css2 and css3? nice answer is given at http://webdesign.about.com/od/css3/a/differences-css2-css3.htm CSS3 has been split up into different sections, called modules. Each of these modules is making it's way through the W3C in various stages of the recommendation process. Hope this could help.
How do I find the version of CSS that I am using?
Although the CSS specification is defined in several versions (v2, 2.1, 3), the CSS version isn't really relevant to the developer; you need to be more concerned with which web browsers support a given feature.
It is useful to know that a given feature was defined in CSS2, 2.1 or 3 because that can give you an idea of how old the feature is, and therefore how likely it is that browsers will support it -- for example border-radius is a CSS3 feature, so browsers more than a couple of years old may not support it fully.
You can find out what CSS features are supported in which browsers from the following sites:
http://www.quirksmode.org/css/contents.html
http://caniuse.com/
The version is only defined by the CSS selectors, propreties and attributes that you use.
You are free to mix elements of CSS 1, 2 and 3 in any styles that you write.
You can refer to the CSS specifications to see more details. The specifications and drafts at the W3C is available via this index: http://www.w3schools.com/w3c/w3c_css.asp
Just an addition of what #Craig said.
In my .net 2.0 framework I have a property to show scroll bars. As I want just the vertical, I've added both properties and, if the browser that user is using support this new CSS 3.0 property (overflow-x), he will see just the vertical one.
In my opinion you should use object detection instead - check the MDC to understand the principle.
On Internet Explorer you might find compatMode and documentMode useful.
As far as I know, there's nothing in CSS code that specifies the version. Browsers are designed to interpret one or more versions of CSS at runtime. Therefore, I would imagine that you would need to get the version of the browser via javascript and then determine what version of CSS is understood by the browser.