impressivewebs / css-values

A PWA that allows you to search for any CSS property to get a quick reference on possible values and browser support.

Hi there ⚡

css-values's Issues

CSS3 Line Box stuff

Looks like lots of stuff here yet to add:

http://dev.w3.org/csswg/css3-linebox/

No idea the stability of these things though...

text-decoration-position is now text-underline-position

http://cssvalues.com/#text-decoration-position

See:

http://dev.w3.org/csswg/css-text-decor-3/#text-underline-position-property

Also has updated values.

Alternate 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.

Logo link not working

The link in the logo's h1 links to http://localhost/cssvalues.com/.

letter-spacing

see: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing?redirectlocale=en-US&redirectslug=CSS%2Fletter-spacing

..Formal syntax: normal |

Missing properties. Difference with javascript list.

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.

link on title

The title link (in the header) redirects to http://localhost/cssvalues.com/

text-decorationis now underline-

Updates based on W3 doc

https://www.w3.org/Style/CSS/all-properties.en.html

This is more of a note to self.

icon value for "content"

See:

http://dev.w3.org/csswg/css3-ui/#content

Navigation idea

It could be great to fix position of the header and searchbox.
Active search will always been shown on scrolling.

Suggestions for some background-related properties

Russ Weakley sent the following suggestions via email:

---

1. When you type a property, you get a list of all possible values. It would be GREAT to visually flag the initial value differently to all other values in the list.
2. Background-size shows

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

1. Another example is background-repeat. The values shown are:

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

1. Another one is background-position

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

[ENHANCEMENT] Auto Complete Function?

An "Auto Complete" or "Suggest" function for the main search box would be useful. Just an idea.

CSS-Values API

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

"space" removed from "border-image-repeat"

http://cssvalues.com/#border-image-repeat

According to this:

http://www.netmagazine.com/features/hot-web-standards-januaryfebruary-2013

See:

http://www.w3.org/blog/CSS/2013/02/21/resolutions-80/

and spec:

http://dev.w3.org/csswg/css3-background/#the-border-image-repeat

position property is missing

I searched for the property: position but it was missing.

Steps to reproduce:

1. Enter the word position
2. Wait :P

I'm using Chrome 21 on a Mac

Use MDN data for browser compatibility charts

https://github.com/mdn/browser-compat-data

Inline Level 3 Features

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).

border resets border-image values

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.

Where does the data come from?

Is this pulled directly from a browser API or is this static data living somewhere?

Not so much "issue" as "suggestion"

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!

background-repeat should be fixed

This accepts two values, somewhat like a shorthand.

word-wrap has wrong MDN link

Suggestion : Trigger focus

Is it possible to trigger focus after loading page ?

It will be more practice ;)

Alphabetical Entries

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.

Add backdrop-filter property

https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Display browser support

Hi, it would be nice, if the supported browsers are displayed too

Add text-combine-horizontal ...?

source:

http://dev.w3.org/csswg/css3-writing-modes/#text-combine-horizontal

Clip property no longer has inset() syntax

clip property now deprecated in favour of clip-path

http://dev.w3.org/fxtf/masking/#clip-property

Which is kind of stupid, because browsers are required to support clip indefinitely.

Data source for the properties/values?

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.

Display Default 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.

Fix links to text-decoration properties

Add "part of flexbox" to order property

Cancel auto-capitalisation and auto-correct for the search field

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?

Link to MDN for further info on properties

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!

Missing "pointer-events" property

see https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Missing text-decoration-color

http://dev.w3.org/csswg/css-text-decor-3/#text-decoration-color-property