csstools / cssdb Goto Github PK
View Code? Open in Web Editor NEWA database of staged CSS features
Home Page: https://cssdb.org/
License: MIT No Attribution
A database of staged CSS features
Home Page: https://cssdb.org/
License: MIT No Attribution
I'm getting this bug on latest MacOS Chrome 97.0.4692.71 (Official Build) (x86_64)
Browser: Firefox 69.0.1 (latest)
OS/wm: Ubuntu 18.04, i3
to reproduce, just click on any hash-link in firefox (like "What are the stages?")
honestly dont know why even bother with all the JS for hash-link scrolling to element id
, if you could just use <a name="staging-process">
instead
Dear cssdb maintainers,
Thank you for your contribution to the open-source community.
This issue was automatically created to inform you a new npm maintainer has published version 5.1.0 of cssdb.
Our service monitors the open-source ecosystem and informs popular packages' owners in case of potentially harmful activity.
If you find this behavior legitimate, kindly close and ignore this issue. Read more
The specifications for CSS Grid Layout Module Level 1 and CSS Custom Properties for Cascading Variables Module Level 1 are both labeled a W3C Candidate Recommendation.
Both features should link to the specifications that matches their given stage, rather than to their latest draft.
cc @SelenIT
Houdini specs are written by the CSS-TAG Houdini Task Force, and seem to focus on developing (typically) JavaScript features that give developers low level control of styling and layout in browsers.
So far the drafts include a handful of interesting specs, which among others include Typed OM (partially implemented in browsers), Properties and Values (with much work to do, like around how shorthands would be handled), and a Parser API (a fabled PostCSS replacement? At the moment it mostly looks like a placeholder template).
For now, I’m unsure if these specs should be handled by this repo, or if they should be handled by some official repo managed by the task force themselves. Either way, I think it would be helpful to provide a kind of caniuse with stages site for developers to check in on the state of these features.
I think that is a good sample that we use PostCSS on cssdb web site's CSS 🤪.
I can be doing a refactor of current CSS file to a PostCSS environment with PostCSS Preset Env .
Awesome initiative! (If only the W3C process was as fast as the TC39 one :p
It would be wise to add warnings for non polyfill-able features like custom properties.
The PostCSS plugins only add syntax support but their dynamic nature makes it impossible to transpile them to static css :)
Site Not Found
Well, this is awkward. The site you're looking for is not here.
The goal of this project is to reflect the real-life stability of new CSS features. This is intended to be helpful to developers who seek to accomplish real things with modern and emerging technologies. This simplified overview should improve communication between developers, authors, and implementors, thus improving the creation of standards, testing, feedback, and new use cases.
However, grouping CSS features into simple, digestible stages is actually very hard. One reason for this is because the maturity of a specification does not necessarily align with either its draft label or the maturity of its implementations. Here are the current staging criteria and definitions.
To better address this particular issue, I would like to revise the criteria and description of all stages. With criteria revisions suggested by @fantasai, and assistance understanding the TC39 process from @hzoo, I would like to revise the criteria and definitions for each stage to be as follows:
Stage 0: Aspirational
An Unofficial Draft or Editor’s Draft championed by a W3C Member. It is highly unstable and subject to change. Stage 0 features are open to ideas and discussion, but may not be considered serious.
Stage 1: Experimental
An Editor’s Draft or early Working Draft championed by a W3C Working Group. It is highly unstable and subject to change. Stage 1 features are recognized as a real problem, but they may not be tied to any particular solution.
Stage 2: Allowable
A Working Draft championed by a W3C Working Group. It should be considered incomplete, unstable, and subject to change. Stage 2 features are tied to a particular way of solving a problem.
Stage 3: Embraced
A Candidate Recommendation championed by a W3C Working Group with implementations by at least 2 recognized browser vendors, possibly behind a flag. It should be considered stable and subject to minor change. Stage 3 features will likely become a standard.
Stage 4: Standardized
A Candidate Recommendation or Recommendation championed by a W3C Working Group and implemented by all recognized browser vendors. Stage 4 features are considered a standard.
@fantasai, do you feel this would better reflect the stability of CSS features? @hzoo, do you feel this still captures the spirit of TC39 stages? If not, how would you recommend I improve them?
By refining these definitions, I do hope this staging process could be formally adopted by the CSSWG.
Is there any super low maintenance templating thing out there?
Even string concat would be better than this.
I don't want the marketing site to be a blocking thing for the package.
caniuse : https://caniuse.com/css-color-function
mdn : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()
mdn data : https://github.com/mdn/browser-compat-data/blob/main/css/types/color.json#L154
spec : https://www.w3.org/TR/css-color-4/#funcdef-color
Not sure about the mdn data, I would have expected a color-function.json
file but I can't find it.
MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
Spec:
https://drafts.csswg.org/css-align-3/#place-items-property
And also your plugin as polyfill: https://github.com/jonathantneal/postcss-place
see : #185
I think the logo itself is correct, but it stands out a bit in the list.
I am also unsure if this is the most recognisable image.
The CSS Overflow specification has been updated to accept a second value.
https://drafts.csswg.org/css-overflow/
[ visible | hidden | clip | scroll | auto ]{1,2}
The
overflow
property is a shorthand property that sets the specified values ofoverflow-x
andoverflow-y
in that order. If the second value is omitted, it is copied from the first.
More info here postcss/autoprefixer#1021
It's would be good to add this feature to cssdb, then create a postcss plugin and add it to postcss-preset-env
.
@jonathantneal what do you think?
I found your great site today and noticed that some of the text in dark mode was illegible. I forked the project and took a stab at it but something is overwriting the styles you all have here and I can't quite get it...
Some of the more anticipated CSS features are in the color module level 5 spec. Let's add these! https://drafts.csswg.org/css-color-5/#colormix
subj.
Stage 3 cssdb definition states the proposal should be "implemented by at least 2 recognized browser vendors, possibly behind a flag"- added a quick test but couldn't find working implementation/flags, do we have the working environments to point the community?
Both stage 1 and stage 2 should probably include something about "and possible failure". Just because we take up experiments or agree that "this idea isn't entirely crazy" doesn't mean that we will not either:
I think it needs to be clear that using an approximation of an early idea serves two purposes:
:has()
pseudo-class is not part of the live profile in specification, so current :has()
example is invalid.
Line 403 in d61beb5
The
:has()
pseudo-class takes a selector list as an argument. In the current specification:has
is not marked as part of the live selector profile, which means it can not be used within stylesheets; only with functions likedocument.querySelector()
.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
https://www.w3.org/TR/selectors-4/#profiles
I would like to make two significant changes to cssdb to help users in the future.
First, I would like to change feature IDs.
The current IDs have been problematic because they try to follow specification anchors, but some features aren’t always covered in a single section, and because sections are inconsistently named, just like spec headings are inconsistently named. On the later point, I asked the CSSWG about their anchors, received feedback from some major spec contributors w3c/csswg-drafts#2255, and a good summary would be:
there is no pattern you can predict for any of the headings
Therefore, I would like the new IDs to name the feature and provide context, which seems more sensible and consistent. For example:
old id | new id |
---|---|
css-cascade-all-shorthand | all-property |
css-fonts-propdef-font-variant | font-variant-property |
selectors-any-link-pseudo | any-link-pseudo-class |
css-color-modifying-colors | color-mod-function |
selectors-dir-pseudo | dir-pseudo-class |
selectors-attribute-case | case-insensitive-attributes |
css-color-functional-notation | color-functional-notation |
css-nesting | nesting-rules |
Second, I would like to rename the project in github from css-db
to cssdb
because that is its name on npm, and because it’s easier to type.
TODO:
cc: @ai, @shrpne, @vkrol, @keithjgrant,
There are no updates for 8 months. Is project alive?
Example doesn't correspond to range media query, what about something like:
@media (width > 30em) and (width <= 48em) {}
Hi,
thanks for the site. It's a great ressource to check progress and innovations.
Each feature comes with a "stage" badge in .svg format.
All filenames match the feature, but the actual file content is always the same.
identical content, and that's just for stage 3.
This results in several dozend downloads for no reason where a single badge for each stage level would do and could be cached.
Have a nice time.
Since it was asked in #30
Tested against https://codepen.io/jakod/pen/rNaLjGq
Firefox 63+: ✓
Chrome 78 and 80 (dev): ✗
Safari 13: ✗
Edge 18: ✗
I’m displeased with the current “stages”. I’m proposing new ones.
The rise and fall of @apply
has taught me a lot about the spec process.
The story goes; the @apply
specification was written by a member of the CSSWG and implemented in Chrome behind a flag. This happened before the CSSWG ever approved it. This is because CSSWG members often have a vendor’s ear, so to speak. Its appearance in Chrome gave developers a false impression that the spec had the support of the CSSWG and the endorsement of Google. Developers felt burned when the feature was “unexpectedly” abandoned by its author. Developers errantly expected a longer “deprecation” process, as well as an “heir” for the feature moving forward. We failed to understand that this feature did not even have the support of the CSSWG, therefore there was no committee to discuss this or to offer any speculative alternative for the future.
Now, with developers still asking for this feature, there needs to be a special “Rejected Stage” to help people understand what happened to that idea. I think the CSSWG “outsider” spec should be considered “Stage 0”, and the inside spec considered “Stage 1”, because the odds are still in favor of a CSSWG member’s spec becoming reality.
Therefore, I’m proposing the following, because it better reflects reality:
Stage | Justification | Perception | |
---|---|---|---|
0 | Personal Draft | Aspirational | This is my personal crazy idea. |
1 | CSSWG Member Draft | Enthusiastic | This is a crazy idea. |
2 | CSSWG Hosted Draft | Experimental | This idea might not be crazy. |
3 | Working Draft | Allowable | This idea is not crazy. |
4 | Candidate | Embraced | This idea is becoming part of the web. |
5 | Recommendation | Standardized | This idea is part of the web. |
- | Rejected | I had no idea what I was doing. |
justification column
A CSS Editor’s Draft championed outside the CSSWG. It should be considered highly unstable and subject to change.
A CSS Editor’s Draft championed inside the CSSWG. It should still be considered highly unstable and subject to change.
A CSS Editor’s Draft hosted by the CSSWG or W3C. It should be considered highly unstable and subject to change.
A CSS Working Draft hosted by the CSSWG or W3C and requiring implementations to move forward. It should be considered stable and subject to little change. It is still subject to rejection as a standard.
A CSS Candidate Recommendation hosted by the CSSWG or W3C and being implemented by at least 2 recognized browser vendors, possibly behind a flag. It should be considered stable and subject to little change. It will likely become a standard.
A CSS Recommendation hosted by the CSSWG or W3C and implemented by all recognized browser vendors. It is a standard.
The CSSWG probably only concerns themselves with Stages 2 - 5, but some of the most popular emerging features to polyfill are still Stage 1.
see : https://twitter.com/sitnikcode/status/1537804199274192898
I think we can make a few tweaks to how we populate the db to improve the overal situation.
These stats are currently missing or known unsupported :
all-property
ie,ie_mob,op_mini
any-link-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
blank-pseudo-class
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
break-properties
and_chr,and_ff,and_qq,android,chrome,firefox,kaios
calc-constants
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
cascade-layers
and_qq,and_uc,ie,ie_mob,kaios,op_mini,op_mob,samsung
case-insensitive-attributes
ie,ie_mob,op_mini
clamp
and_qq,and_uc,ie,ie_mob,kaios,op_mini
color-adjust
and_chr,and_qq,and_uc,android,chrome,edge,ie,ie_mob,ios_saf,op_mini,op_mob,opera,safari,samsung
color-contrast
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
color-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
color-functional-notation
and_qq,and_uc,ie,ie_mob,kaios,op_mini
color-mix
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
color-mod-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
container-queries
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,samsung
custom-media-queries
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
custom-properties
and_qq,ie,ie_mob,op_mini
custom-property-sets
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
custom-selectors
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
dir-pseudo-class
and_chr,and_qq,and_uc,android,chrome,edge,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
display-two-values
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
double-position-gradients
and_qq,and_uc,ie,ie_mob,kaios,op_mini
environment-variables
and_qq,and_uc,ie,ie_mob,kaios,op_mini
exponential-functions
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
fangsong-font-family
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
focus-visible-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
focus-within-pseudo-class
and_uc,ie,ie_mob,kaios,op_mini
font-format-keywords
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
font-variant-property
and_chr,and_qq,and_uc,android,chrome,edge,ie,ie_mob,op_mini,op_mob,opera,samsung
gap-properties
and_qq,and_uc,ie,ie_mob,kaios,op_mini
gray-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
grid-layout
ie,ie_mob,op_mini
has-pseudo-class
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
hexadecimal-alpha-notation
and_qq,and_uc,ie,ie_mob,kaios,op_mini
hwb-function
and_qq,and_uc,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
ic-unit
and_chr,and_qq,and_uc,android,chrome,edge,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
image-set-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
in-out-of-range-pseudo-class
ie,ie_mob,kaios,op_mini
is-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
lab-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
lch-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,kaios,op_mini,op_mob,opera,samsung
logical-properties-and-values
and_qq,and_uc,ie,ie_mob,kaios,op_mini
matches-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
media-query-ranges
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
nesting-rules
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
not-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
oklab-function
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
opacity-percentage
and_ff,and_qq,and_uc,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari
overflow-property
and_qq,and_uc,ie,ie_mob,ios_saf,kaios,op_mini,safari
overflow-wrap-property
ie,ie_mob,kaios,op_mini
overscroll-behavior-property
and_uc,ie,ie_mob,ios_saf,kaios,op_mini
place-properties
and_qq,and_uc,ie,ie_mob,kaios,op_mini
prefers-color-scheme-query
and_qq,and_uc,ie,ie_mob,kaios,op_mini
prefers-reduced-motion-query
and_qq,and_uc,ie,ie_mob,kaios,op_mini
read-only-write-pseudo-class
ie,ie_mob,kaios,op_mini
rebeccapurple-color
ie,ie_mob,op_mini
sign-functions
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
stepped-value-functions
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
system-ui-font-family
ie,ie_mob,kaios,op_mini
trigonometric-functions
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
unset-value
and_qq,and_uc,ie,ie_mob,kaios,op_mini
when-else-rules
and_chr,and_ff,and_qq,and_uc,android,chrome,edge,firefox,ie,ie_mob,ios_saf,kaios,op_mini,op_mob,opera,safari,samsung
where-pseudo-class
and_qq,and_uc,ie,ie_mob,kaios,op_mini
Let's add links to mdn doc for features. Specification usually is more difficult to read, especially for beginners. Also, it will be useful for site
Breaking changes are coming to cssdb and they impact PostCSS Preset Env. I appreciate your thoughts.
At present, cssdb has used this strategy:
Stage | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
W3C Status | Unofficial Draft or Editor’s Draft |
Editor’s Draft or Working Draft |
Working Draft | Candidate Recommendation | Recommendation |
Browser Implementations | 0+ | 0+ | 0+ | >= 2 (even behind a flag) | >= 4 |
In this existing strategy, the stage has required both the W3C Status and the number of Browser Implementations to be fulfilled.
Moving forward, cssdb would use this new strategy:
Stage | 0 | 1 | 2 | 3 | 4 |
---|---|---|---|---|---|
W3C Status | Unofficial Draft or Editor’s Draft |
Editor’s Draft or Working Draft |
Working Draft | Candidate Recommendation | Recommendation |
Engine Implementations | < 2 | < 2 | >= 2 | >= 3 | >= 3 |
In this new strategy, the stage would require either the W3C Status or the number of Browser Implementations to be fulfilled.
Additionally, tracking would change from Browser Implementations to Engine Implementations. The implementations would be Blink, Gecko, and WebKit. This means Brave, Chrome, Edge, and Opera would all count toward only 1 implementation.
The strategy is changing because there are now only 3 distinct browser engines with a significant number of users in development; Blink, Gecko, and WebKit. At this time, I am unaware of any further development being put into Presto, Trident, or EdgeHTML. While the number of engines might change again in the future, making this change in the next major version of cssdb is intended to be prudent.
The number of required implementation is changing to better reflect real-world compatibility. The remaining 3 browser engines and the W3C seem to agree and match one another in public APIs, while keeping experimentations behind experimental flags.
These changes to cssdb would have a big impact on what PostCSS Preset Env transforms.
Consider that any feature in Editor’s Draft or Working Draft is stuck in Stage 0 or Stage 1, regardless of the number of implementations. Moving forward, that same feature in Editor’s Draft with 2 implementations is Stage 2, while in Working Draft it is Stage 3, the stage enabled by default. The intention of this change is to honor the promise of cssdb is to be a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
As a significant side benefit, these changes will make it easier to calculcate the status of features with scripting.
break-inside
, break-before
, break-after
properties should fallback to page-break-
alias.
This fallback has removed from autoprefixer postcss/autoprefixer#972
I made postcss-page-break
plugin for this and want to add it to postcss-preset-env
. But first, break-
feature should be added to css-db
.
This is a breaking change but we think this paints a more accurate picture.
This was added yesterday:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.