impressivewebs / css-values Goto Github PK
View Code? Open in Web Editor NEWA PWA that allows you to search for any CSS property to get a quick reference on possible values and browser support.
Home Page: https://cssvalues.com
A PWA that allows you to search for any CSS property to get a quick reference on possible values and browser support.
Home Page: https://cssvalues.com
Looks like lots of stuff here yet to add:
http://dev.w3.org/csswg/css3-linebox/
No idea the stability of these things though...
http://cssvalues.com/#text-decoration-position
See:
http://dev.w3.org/csswg/css-text-decor-3/#text-underline-position-property
Also has updated values.
Display the alternate values for a property. For example for margin you display:
[margin-top] [margin-right] [margin-bottom] [margin-left]
why not also display
[margin-top] [margin-right & margin-left] [margin-bottom]
[margin-top & margin-bottom] [margin-right & margin-left]
[margin-top & margin-right & margin-bottom & margin-left]
or [all margins]
same goes for padding and any other property like that.
The link in the logo's h1 links to http://localhost/cssvalues.com/.
..Formal syntax: normal |
background-position-x ... https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x
background-position-y ... https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y
contain ... https://developer.mozilla.org/en-US/docs/Web/CSS/contain
font-variant-alternates ... https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates
max-block-size ... https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
max-inline-size ... https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
min-block-size ... https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
min-inline-size ... https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
ruby-align ... https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align
ruby-position ... https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position
text-decoration-skip-ink ... https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink
text-emphasis-color ... https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color
I run in Firefox console:
ret=[];
for (var pp in bd=document.body.style)
{
if (pp[0] == '-' || pp.toLowerCase()!=pp) continue;
ret.push(pp)
}
ret.sort();
alert(ret.join('\n'))
and create diff width your list.
The title link (in the header) redirects to http://localhost/cssvalues.com/
https://www.w3.org/Style/CSS/all-properties.en.html
This is more of a note to self.
It could be great to fix position of the header and searchbox.
Active search will always been shown on scrolling.
Russ Weakley sent the following suggestions via email:
auto
cover
contain
<length>
<percentage>
<length> auto
auto <percentage>
<length> <percentage>
<percentage> <length>
This possibly gives a false impression that these are the total number of options. In reality there are others such as:
auto (default)
cover
contain
length (auto)
length auto
percentage (auto)
percentage auto
length length
length percentage
percentage percentage
percentage length
repeat
repeat-x
repeat-y
no-repeat
space
round
Again, there are other options
repeat-x (auto)
repeat-x auto
repeat-y (auto)
repeat-y auto
repeat (repeat)
repeat repeat
space (space)
space space
round (round)
round round
no-repeat (no-repeat)
no-repeat no-repeat
0% 0%
left top
center center
right bottom
There are a wide range of options here
length length
length percentage
length keyword
percentage percentage
percentage length
percentage keyword
keyword keyword
and four keywords...
keyword length keyword length
keyword percent keyword percent
An "Auto Complete" or "Suggest" function for the main search box would be useful. Just an idea.
Hi Louis,
thanks for that handy compendium! Did you think of providing a simple api which may take the searchterm as argument and return some json with the CSS-VAlues for that term?
thanks + greets,
Hans
I searched for the property: position
but it was missing.
Steps to reproduce:
position
I'm using Chrome 21 on a Mac
A few features in this spec have not been added yet:
https://drafts.csswg.org/css-inline-3/
I will add them as the spec progresses to a point where implementation is permitted (most notably for the leading-trim
property).
Probably worth adding a note on this on:
http://cssvalues.com/#border%20
But note that it doesn't define them directly, it only resets them to their initial values.
Is this pulled directly from a browser API or is this static data living somewhere?
Helpful as current reference to include which properties are css3/experimental and which are fully supported by CSS2.1 and below.
Great resource though, love it!
This accepts two values, somewhat like a shorthand.
Is it possible to trigger focus after loading page ?
It will be more practice ;)
When you type in "padding", the first entry is "padding-top" where the expected result would be "padding".
In fact, "padding" is the last result displayed.
Hi, it would be nice, if the supported browsers are displayed too
http://dev.w3.org/fxtf/masking/#clip-property
Which is kind of stupid, because browsers are required to support clip
indefinitely.
If you aren't willing to share the code, might you be willing to share your data source?
Ref: highlightjs/highlight.js#3615
In a few minutes of quick googles it seems harder than I thought it would be to just get a COMPLETE list of all discrete named CSS values.
How about putting in the reset/default/inherited values for some of them?
Here on nimbupani.com there's a list of safe CSS defaults for the most standard properties. I think it would make it super slick.
As css is a case independent language but most people use lowercase wouldn't it be a good idea to stop both of these when browsing from either a phone or tablet?
Sometimes the little blurb of text isn't really enough. It would be great if each property had a link out to MDN (https://developer.mozilla.org/en-US/docs/CSS/background-attachment, for example) if further information is needed.
Also, I am happy to help implement this!
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.