codrops / css-reference-issues Goto Github PK

The @document CSS at-rule

Official Syntax

The @Domain declaration starts with the @Domain word

Which is it?

Hello,

I didn't have time to carefully read all the Flexbox reference at http://tympanus.net/codrops/css_reference/flexbox/, so I've mostly skimmed it, but I've noticed a few things with the illustrations:

Typos:

• order-illustration is missing a closing parenthesis.
• align-self-illustration is missing a "e" in "baseline" ("basline").

One imprecision:

• flex-grow-illustration suggests that the values for the third example are: flex-grow: 0 for the first and last item, and flex-grow: 2 for the middle item. The text after the illustration makes it clear that the first and last items have flex-grow: 1, but the illustration can be misleading. My suggestion: add another line of text before the third example, so that the label reads:

flex-grow: 1 (all)
flex-grow: 2 (on second item)

Congrats again on all the excellent work in this reference.

This first example shows the text through the backface on Firefox 34.0.5. I have a similar plugin with the same issue. Any ideas for a fix? http://tympanus.net/codrops/css_reference/backface-visibility/

http://tympanus.net/codrops/css_reference/nth-child/
http://tympanus.net/codrops/css_reference/nth-last-child/
http://tympanus.net/codrops/css_reference/nth-of-type/
http://tympanus.net/codrops/css_reference/nth-last-of-type/

Under Values > relative-size

In addition to the above absolute keywords, two relative keywords exits: larger and smaller, which calculate the font size of an element relative to its parent’s font size. So, if, for example, the parent’s font size is set to large and the element’s font size is set to larger, the element’s font size will be x-large.

Is it supposed to be:

In addition to the above absolute keywords, two relative keywords exist: larger and smaller, which calculate the font size of an element relative to its parent’s font size. So, if, for example, the parent’s font size is set to large and the element’s font size is set to larger, the element’s font size will be x-large.

P.S. This reference guide is very helpful. Thank you!

In the ::before article (http://tympanus.net/codrops/css_reference/before/) the blockquote example sample code has the ::before element listed with a font-size of 2em, but in the live code it has a font-size of 3em.

Additionally, the sample code has a top value of 5px but the live example has a top value of 20px. Obviously this is a small issue but just wanted to bring itup.

1.Work on all desktop browsers. (not on Android)
2.

works.
3.Your exemple is bad : your text isn't english ! Browsers use an internal local dictionary. (so I didn't have test all languages, work fine in english, french and I think all latins language).
4. I should update CanIuse :

• Opera 27.0.1689.69 support the 3 values.
• Firefox 35.0.1 support the 3 values.
  my test : http://codepen.io/fvignals/full/azYexa

good work :)

Hi,
This CSS references very complete, thank you for it!
I would like to know what kind of license is used for it. Is it possible to copy it as off-line version?

The :focus pseudo-class does not work for at least a and button elements for iOS Safari (I am on iOS 9). This bug can be recreated by visiting your reference page and clicking the links. They do not receive the outline that you are giving them.

Been working on this issue for a CSS only dropdown component I am trying to build (relying on the :focus state), and found this quirk. Thought it might be worth mentioning in the reference. Haven't been able to test on other touch devices yet.

EDIT: Also, thanks for all the work on this and everything else Codrops provides. You guys are an incredible resource!

Hello Sara!
First of all, I love your work and I thank you for share it with us!

I don't know if this is really an issue, it is only a typo, but it appears in every embedded caniuse info box:
At the bottom of the info box there are always a couple of links:
"Compatibility table provided by Can I use... — Seperate page — About embedding "
I think, it should be "Separate page". Sorry, I'm absolutely not picky, but as I saw it I thought that if it really is a typo, you could want to know it.

Have a nice day and thank you again!
Alberto

column-fill initial value is 'balance', not 'auto'.
http://www.w3.org/TR/css3-multicol/#cf

Not a big deal, since it's supported almost nowhere, but why not correct anyway

Not a real issue, more a little adjustment?
Article is about an ::after pseudo-element and example is featuring ::before pseudo-element.
http://tympanus.net/codrops/css_reference/after/

.element::before {
    content: url(path/to/image.png); /* an image, for example, an icon */
}

.element::before {
    content: "Note: "; /* a string */
}

.element::before {
    content: "\201C"; /* also counts as a string. Escaping the unicode; renders it as a character */
}

I noticed when reading the z-index article, that you show in an example "z-index: -1" but don't explain it's usage.

Description of the first image on page http://tympanus.net/codrops/css_reference/position/ states:
"The element is moved 35px to the left and 35px to the right, relative to its original position."

When it should say:
"The element is moved 35px to the bottom and 35px to the right, relative to its original position."

Filter Reference Line: 658 has a spelling error. droo-shadow should be drop-shadow.

It's currently column-width.

You wrote: 'If an element is positioned absolutely and none of its predecessors have a positioning context, it is positioned relative to the <body> of the page'.
I think, it is positioned relative to the root element <html> (the initial containing block).

REF: http://caniuse.com/#feat=css-touch-action

In the last demo the third transition function is step-start but it's written step-end. please check it. thanks.

The paragraph describing browser support for the :scope pseudo-class incorrectly declares that it is only supported in Chrome. It is currently only supported in Firefox.

Page
http://tympanus.net/codrops/css_reference/font-face/
Paragraph
@font-face Generator
FontSquirrel’s generator is an indispensible tool when implementing @font-face.

On the following page clicking on @page links to a page that doesn't exist.

Thank you, thank you, thank you! Finally a very complete hands on tut on flexboxes.
Cheers, Rene

Hi, there's a &dmash; in the float article, I think it should be —?

If it would be possible to download the whole CSS reference or included in the app Dash, it would be awesome. As I guess many designers/developers are often on the go without WiFi or internet access, this would be great for using as a reference.

http://tympanus.net/codrops/css_reference/placeholder/
It should use placeholder instead of value

it would be great if pseudo-classes and pseudo-element were distinguished

Article link.

That's because in css code there is no equals sign in attribute selector:

input[type "checkbox"]:checked + label {
  text-decoration: line-through;
  color: grey;
}

On the page about ::first-line the first heading reads "Properties used to style ::first-letter".

That should probably be "Properties used to style [b]::first-line[/b]".

And a million thanx for this stellar CSS reference!

Under Trivia & Notes in http://tympanus.net/codrops/css_reference/background-blend-mode/ the end of the sentence appears to be cut off.

Thanks for all your hard work!

Search for boz-sizing in http://tympanus.net/codrops/css_reference/box-sizing/

Thank you for taking the time to compile this reference. It serves as a great guide to deepen my understanding of CSS! I have not been using css functions at all. I didn't see anything on codrops and when I google for them I encounter JQuery's css() or LESS examples.

Can you point me to a place to a general intro to css functions?

Thanks again!

I think the section needs a 'flex-basis: auto' in the mq for stretching the section when the screen is getting smaller to prevent the content from overflowing.

@media screen and (max-width:500px) {
.container {
flex-direction: column;
flex-basis: auto;
}
}

e.g. Linking to "http://tympanus.net/codrops/css_reference/calc#browser_support" specifically, instead of just linking to the page.

Hi, CSS Reference is a great project for beginners and I want to translate some articles to a Chinese version for my workmate.
So I want to know what kind of license is used for it? Is it allowed to do this?

Unsure if attribute selectors should be include here but I think they can be argued for. Also, I feel like many entry level designers and developers don't know about them.

The link links to: http://tympanus.net/codrops/css_reference/border-bottom-width-2/

There is an additional -2 at the end of the entry name.

The 'background-attachment' with the property 'fixed' is no longer supported for the mobile Chrome-browser.

http://caniuse.com/#feat=background-attachment

"The content of ::after can also be a counter, and it can also be left empty."

Should counter be pointing to the counters page instead?

I've opened this issue to keep track of all additional concept entries that I want to add as soon as possible to the reference. These entries include:

• attribute selectors
• media queries (including different possible conditions, etc.)
• Combinators
• all property entry
• appearance property entry

The list will be updated with other entries when necessary and, of course, comments and more suggestions are welcome in the comments!

I don't expect it'd be useful to duplicate the compatibility tabels from caniuse.com - but It'd be great if you could use their API to bring in the compatibility tables for each feature. Would be a great addition to have at the foot of each page.

Hi, in the section below it's said "left margin of an element to be ‘10%’ of its width" however it is 10% of its container not the element itself.

You can check it here quickly.

Thanks again for your great reference 👍

http://tympanus.net/codrops/css_reference/filter/

CSS Filter 404 error at browser support section and live demo section.

A lot of code examples only contain a block of properties (without any class declaration). I think we should add a class declaration to them so that the syntax highlighting of highlight.js works fine with them.

Example (how we do it now):
<pre class="brush:css">
mask-size: 50% auto;
mask-repeat: repeat;
mask-origin: border-box;
</pre>

should become

<pre class="brush:css"><code>
.examples {
mask-size: 50% auto;
mask-repeat: repeat;
mask-origin: border-box;
}
</code></pre>

We should edit the examples, whenever we edit/update an entry.

Page: http://tympanus.net/codrops/css_reference/flexbox/
Image: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2014/10/flex-direction-illustration.jpg

The 'column reverse' numbers featured on the 'flex direction' image should be listed from high to low. Currently they're listed the same as the 'column' numbers.

• In the page http://tympanus.net/codrops/css_reference/default, you'll find that there is a wrong spelling on the sentence, "Buton inputs and buttons of type="submit" are considered one group, and therefore the first of them is the default". "Button" has missed a cute character 't'.

Wow, really amazed by the sheer amount of information. This brings me to something user experience related; because of the great deal of information, it can be hard to find your way around.

A table of contents would be really useful on for example the transform page.
I was looking for the Browser Support and had to scroll down for about 26 pages (while getting more and more excited, haha) before I ended up at the CanIUse tables.

In the browser support section it's written :link, please correct it :)

I guess .ct-cssref .ct-cssref-support iframe is missing 10 pixels in height, which results in a small 10px vertical scrollbar and the clipping of the footer text, see attached image.

/* Can I use embed */
.ct-cssref .ct-cssref-support iframe {
    width: 100%;
    height: 370px; /* settings this to 380px fixes it for me on Chrome 42.0.2311.135 */
    margin: 30px 0;
}