CSS reference Documentation

Transfer from http://web.jobbole.com/82857/

We have released a new chapter on Codrops: CSS reference documentation. Let's talk about it now and see what new features are added to make learning CSS simpler and more practical.

Codrops is one of the most inspirational sites. Yes, I'm biased, but I'm sure you agree with the fact.

If you're looking for inspiration, you can find a lot of creative resources here that will give you one or two ideas in your head. One of the reasons I like this site is that Manoela and Pedro will definitely impress us with the resources.

If you are looking for ways to learn how to use CSS properties, you can find a lot of source code here to learn. But if you want to learn more about the basics of attributes: attribute definitions, different values, and the meaning and effect of each value, or something else. And you can find all the resources you're looking for here, isn't it perfect?

A year ago, we thought it would be exciting if Codrops had some chapters for readers to learn about CSS properties. As a result, Codrops is built as an excellent platform to provide inspiration and learn CSS for users. This is the idea that manoela to me, and just a few days later, I started to put it into practice.

So, in the past year (less than a year), we have added a new section to Codrops:CSS reference Documentation . We are very excited to be able to share this outcome with you at the end.

It is difficult to begin with, this reference document is still evolving, and we are working hard to improve it and make it better. If you have any suggestions for improvement, or if you find an error, you can submit it here to GitHub repo.

Reference documents

Codrops's CSS Reference document contains an entry list entry:CSS properties ,CSS features ,CSS data types ,CSS @ rules and CSS pseudo-classes/ Pseudo-selector/pseudo-element . Each entry defines and describes CSS properties, functions, data types, @ rules, or pseudo-class/pseudo-selectors/pseudo-elements.

In addition to the above 5 categories of entries, there is a category of CSS concept . Each entry in the CSS concept contains specific CSS concepts or complete feature guidance .

A CSS concept entry acts as a global entry for a set of related properties. For example, Flexbox and Counters are two concepts, so they all have their own entries. Each entry explains its conceptual meaning and purpose, and also contains definitions and examples of its properties.

So, what exactly is a CSS entry?

CSS Entry Structure

Each entry has a head and intelligent search module, and the header describes the category to which the entry belongs. This intelligent search feature is described in one of the following sections.

Each CSS entry consists mainly of these parts: description , official syntax , attribute values , examples , online demos , browser support , deep Understanding and related items . Each part may consist of several small parts.

In the description section You can learn about CSS properties, functions, selectors, and other uses. This section is basically a definition of the concept and a further explanation.

After the definition section is a summary of the official syntax, the initial value, which elements the CSS attribute can be applied to, and whether the attribute value supports transitions (note: Transition-property of CSS 3). Some categories do not require this section, so whether it exists depends on which category you are reading.

Each value is defined and described in the attribute Values section. In addition, if a CSS attribute does not have a set of values (such as the @ rule), then the section is omitted.

You'll see cases in the example section that use CSS features – including the main code snippets and running results (if any).

The online presentation section contains one or more examples of online demonstrations, some of which are from the example chapters, sometimes using additional cases. Because the results of the run depend on browser support, the cases shown on the line may be useful to show the results of the run (if the browser does not support the CSS feature).

It is important to note that many entries contain some inline demos, some of which are embedded in the Description section.

Be sure to check your browser's support to determine whether the browser you are using supports the features you are reading.

With a lot of good reading resources on CSS features and topics, an in- depth understanding of chapters includes a good resource link worth reading, with a canonical document link that includes features that CSS will introduce.

Codrops Playground

During my entry, Manoela and Pedro made one of the best features of the CSS reference document:Playground.

All the cases you see in this article can be edited and experienced by you , and we strongly recommend that you do so so that you can better understand the operation of a feature and the results of its different values. It is important to note that playground is still in the alpha phase, and there are many features that have not yet been implemented. Despite sending any BUG reports, suggestions and comments to playground ' at ' codrops.com.

Smart Search

There is an intelligent search module in each entry. Of course, you can also find it on the Codrops homepage, close to the left feature article.

As the name "Smart Search", it will match the string you want to search for, and then return a list of results from all CSS entries. So, if you search for an unambiguous string (or a letter), the Smart Search module will form a drop-down box with the title containing the string from all the entries. This is useful when you are searching for a specific property, and it can get some related related properties (for example: border, Border-top, Border-bottom, bottom-right, etc.).

Browser support

Whenever available, you will see Caniuse.com's browser compatibility form embedded in the browser Support section, so this compatibility form is always up to date.

Since some entries do not have a browser compatibility table embedded in Caniuse, we will manually write this browser support information. Common and tested key features are supported by browsers, but some features may be modified in the future. So, if you find yourself experiencing outdated compatibility information, please contact us to let us know and we will update it according to your suggestions.

Look forward

Some of the missing attributes, which are only supported by a small number of browsers, are not even supported by today's browsers. The instructions for them are not very stable and often change. Our desire is to add them to the entry because they will hopefully get better support in the future, and their instructions become stable.

We all know that in our field, every day there will be new discoveries. So, we want the CSS reference document to grow and expand all the time, adding extra attributes and features to the moment. Immediate current item update is slow.

We set a milestone goal, first to provide you with a good reference document, and committed to continuously improve it.

Your feedback

Of course, your comments and feedback are very important to us. After all, this reference document is for you, so we want to make sure you can find anything you need here.

We collect your feedback and suggestions on the Github library, which specializes in collecting questions and suggestions.

Find a BUG? Find a piece of information that needs to be updated? A typo? Have suggestions for improving reference documentation? Want us to add a CSS concept to the concept entry? Then submit your questions on Github. I myself will often look for questions and answers to your questions, and as much as necessary and as soon as possible to edit and update. If you want to get an answer on an item or request in time, you can send me a message on Twitter.

Stay in the last few words

We have put all our efforts into this reference document, hope it can provide you with very useful learning resources. I hope you can learn as much as possible from the reference document, because I have learned a lot in the process of writing.

At the same time, we also hope that you enjoy the small transformation of the Codrops!

Thank you very much for your reading. Also, don't forget to check out the reference documentation!

CSS reference Documentation