jgthms / css-reference Goto Github PK

the description of align-self is missing the auto value (which is the default value)

Add GH repo link on website, so that more people can contribute and keep the project alive

PS: I'll submit a PR later if possible, but don't count on it

Mistake here: http://cssreference.io/#flex-flow

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow
The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap individual

So this should be "Shorthand property for flex-direction and flex-wrap. "

The flex-flow description is wrong:
"Shorthand property for flex-direction and flex-flow."

should be:
"Shorthand property for flex-direction and flex-wrap."

It reads:

Defines the order of the elements on the z-axis*8. It only works on positioned elements (anything apart from static).

It should probably read:

Defines the order of the elements on the z-axis. It only works on positioned elements (anything apart from static).

As newbie, I'd like to help but I'm little bit lost I don't know where I can add/edit properties.

hey looks like this is missing:

cursor: not-allowed

To those who are concerned.
The 'clear' page has a mistake when explaining the clear right in image. The word 'right' is miswritten as 'left'.
https://cssreference.io/property/clear/

I suggest to add a "show code" button next to the preview image. It would make it much easier to understand the details of what is written in words and shown in pictures if you can see the code next to it.

Example:
This image and text talks about some container. But what is the container? Its not visible in the image. Is it a wrapper around "first line" and "second line"? This questions could be easily solved by looking at the code that generated the image.

z-index

Assigning z-index of 0 to the container #z-index--1 seems to fix the issue, but I don't know if this is the appropriate solution.

Why is this happening? I would have expected the default z-index of the container to be 0.

Hi! Can I translate this content to pt-br?
I really liked this content and wanted to show it to people who do not know how to communicate in English

https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-align-last

First, great work. Nice reference page.

But I'm missing the browser support info. Often this is pretty important ;)
So maybe a link to the caniuse.com entry or even automatically pulled in info would be great!

Some features have varying amounts of support, so I wonder if there's a nice way to reveal whether and where a feature is supported. I initially imagined something sitting adjacent to "link / share / mdn" in some way. Thoughts?

Does Can I Use provide some lightweight API for pulling compatibility information in? or some microformat like:

( F: 35+ | C: 50+ | S: 10+ | I: Edge )

First a massive thank you - this is awesome and will I'm sure be a great resource for people learning CSS.

My feature request is to have the ability to filter by domain eg:

Typography:

• font-size
• line-break
• etc

Flexbox:

• display
• flex-basis
• align-items

As someone who's been coding for a while but learning Flexbox being able to see just the Flexbox rules with examples would make it a lot easier. Also, with the typography example, not all the rules are named logically.

The red line with the "self" tag should be aligned with the targeted flex item at the flex-start. Great site btw!

In #align-items section, align-items: flex-end; property, redundant underscore:

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the _bottom.

In #position section, all properties text description refer to yellow block, while block itself is reddish:

It also makes the element positioned: it will act as an anchor point for the absolutely positioned yellow block.

Overall, very useful project for CSS study, thank you.

It would be awesome if you add CSS units. BTW, thanks for this website. You are the best!

should read

...the element will move right by the amount defined by the left value.

instead of

... move upward ...

the same applies to "top"

PR will follow

Hi what this font cssreference logo text?

It would be great if you could add both background-repeat: round and background-repeat: space to the background reference since they're really useful in some scenarios.

Links:
https://css-tricks.com/almanac/properties/b/background-repeat/
http://caniuse.com/#feat=background-repeat-round-space
http://cssvalues.com/#background-repeat

When viewing a collection, I would like a quick overview of all the properties in that collection, so I can more easily memorize what properties can be used for what. For example, when viewing the flexbox collection, I would like to see this list of properties:

• align-content
• align-items
• align-self
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• justify-content
• order

The natural place for such an overview would be the list of the properties in the sidebar, below “Search for a property”. That search would also be restricted to properties in that list. Only on the index page would that list show all properties.

If you think browsing and searching through all properties on any page is a big use-case, you could have radio buttons like these that appear only on collection pages:

Properties: ◉ in collection ◎ all

🔍 Search for a property

• align-content
• …

http://cssreference.io/#align-content

Hi ~ Can align-content: stretch;'s example add some description about why cause the second line's item are suspending there?

Reference to the spec: https://drafts.csswg.org/css-flexbox-1/#valdef-align-content-stretch

1. the remain space is: 300px(container) - 100px(line 1 highest item) - 50px(line 2 highest item) = 150px
2. 150px split it up: 150px / 2 = 75px
3. line one's content height: 100px(line 1 highest item) + 75px = 175px
4. line two's content height: 50px(line 2 highest item) + 75px = 125px

The steps may be above steps.
And the first line red box height is 175px and second line green box is 125px
Like below one:

Hello,
I think there is a typo on align-self descriptions
http://cssreference.io/property/align-self/

#align-self: flex-start;

If the container has align-items: center and the target has align-items: flex-start, only the target will be at the start of the cross axis.

The second rule should be align-self: flex-start, shouldn't it?
Same remark for other descriptions of align-self
Thank for your work.

As awesome as this site is the lack of W3C links prevents me from using it as my primary reference for CSS properties. Until then cssvalues.com will remain my go to reference site.

Why?

1. Adding static files to cache makes the repeated visits faster

2. Bringing offline support.

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

• broken left navigation: block 'collection' and I can't scroll nav
• animations not working

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.

should be

The box has the defined width. The content accommodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

http://cssreference.io/property/border-radius/

The description of two value may be a mistake.
From [MDN[(https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) about this two value,
the first is top-left/bottom-right and the second is top-right/bottom-left;

And could it be possible if add more border-radius example like 4 value(clockwise); slash value.etc

Thanks for your works

https://twitter.com/jgthms/status/802130369881534464

The majority of the page is offscreen and perhaps should be rendered more dynamically.

This may be solved by pagination, infinite scrolling, or lazyloading.

Keep in mind:

• The sidebar is important to keep in mind as it expects the elements to exist and be loaded.
• Avoid "popping" of elements in and out as user scrolls.

Now it leads to a GitHub 404.

All major browsers will soon support CSS grids. So it might be a good idea to add CSS grid reference.

PS: 👍 Thanks for this reference. Flexbox visual reference was both comprehensive and concise.