HTML5 + CSS3 application details

Comments: Now HTML5 and CSS3 are waiting for you. Let's see if they can really bring our design to the next height.

Web designers can use HTML4 and CSS2.1 to do something cool. We can complete the logical structure of the document and create a website with rich content without using the old table-based layout. We can add beautiful and exquisite style styles to the website without using the inline <font> and <br> labels. In fact, our current design capabilities have moved us away from the terrible age of browser wars, proprietary protocols, and ugly web pages that are full of flashing, rolling, and flashing.

Although HTML4 and CSS2.1 are already widely used, we can do better! We can reorganize the structure of our code and make our page code more semantic. We can reduce the amount of code that brings beautiful page styles and make them more scalable. Now HTML5 and CSS3 are waiting for you. Let's see if they can really bring our design to the next height...

Once, designers often used table-based la s without any semantics. However, in the end, I would like to thank the innovative idea like Jeffrey Zeldman and Eric Meyer. The SMART designers gradually accepted the relatively more semantic <div> layout instead of the table layout, and start calling the external style sheet. Unfortunately, complex web design requires a large number of different tag structure code. We call it "<div>-soup" syndrome. You may be familiar with the following code: <div id = "news">

The Code is as follows:
<Div class = "section">
<Div class = "article">
<Div class = "header">
<H1> Div Soup Demonstration <P> Posted on July 11th, 2009 </p>
</Div>
<Div class = "content">
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
</Div>
<Div class = "footer">

</Div>
</Div>
<Div class = "aside">
<Div class = "header">
<H1> Tangential Information </Div>
<Div class = "content">
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
</Div>
<Div class = "footer">
<P> Tags: HMTL, code, demo </p>
</Div>
</Div>
</Div>
</Div>

Despite this reluctance, the above example still shows that HTML 4 is too bloated after coding a complex design (in fact, xHTML1.1 is also so ). But it is exciting that HTML5 solves the "<div>-soup" syndrome and brings us a new set of structural elements. These new HTML5 elements have more detailed semantics to replace the <div> labels without semantics, and provide "natural" CSS hooks for CSS calls.

The following is an example of HTML5 solution: <section>

The Code is as follows:
<Section>
<Article>
<Header>
<H1> Div Soup Demonstration <P> Posted on July 11th, 2009 </p>
</Header>
<Section>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
</Section>
<Footer>
<P> Tags: HMTL, code, demo </p>
</Footer>
</Article>
<Aside>
<Header>
<H1> Tangential Information </Header>
<Section>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
<P> Lorem ipsum text blah. </p>
</Section>
<Footer>
<P> Tags: HMTL, code, demo </p>
</Footer>
</Aside>
</Section>
</Section>

As we have seen, HTML5 allows us to replace a large number of meaningless <div> labels with a lot of more semantic Structured code labels. This semantic feature not only improves the quality and semantics of our web pages, but also greatly reduces the class and id attributes that must be called by CSS in code. In fact, CSS3 can ignore all classes and IDs.

Say goodbye to class attributes. Welcome to neat labels.　

Combined with HTML5 with new semantic tags, CSS3 provides powerful power for web designers. With HTML5 energy, we will gain more control over the document code. With CSS3 energy, our control will become infinitely infinite!

Without those advanced CSS selectors, we can still use powerful HTML5 bars to call different containers without the class and id attributes. Like the previous DIV layout, we may need to call the following in css: div # news {}

The Code is as follows:
Div. section {}
Div. article {}
Div. header {}
Div. content {}
Div. footer {}
Div. aside {}

Let's take a look at HTML5-based instances: section {}

The Code is as follows:
Article {}
Header {}
Footer {}
Aside {}

This is an improvement, but some problems still need to be solved. In the <div> instance, we need to call the elements on the page through the class or id attribute. This logic will allow us to apply styles to any element in the document, whether overall or individual. For example, in the <div> instance, The. section and. content elements are easy to locate. However, in HTML5 instances, there are many section elements in the actual document. In fact, we can add some specific attribute selectors to call those different section elements, but I am not able to use a small number of advanced CSS selectors to locate different section elements.

Positioning HTML-5 elements without class and id

Next let's take a look at how to locate an HTML5 page element instance without using the class and id. We can use three CSS selectors to locate and identify elements in the instance. As follows:

Descendant selector: [CSS 2.1]: EF
Sibling selector: [CSS 2.1]: E + F
Sub-element selector: [CSS 2.1]: E> F

Let's take a look at how to locate the section elements in the document without using the class and id:

Locate the <section> element of the outermost layer

Considering that our example is not a complete set of HTML5 code, we assume that the <nav> element and <section> element under the <body> element are sibling elements. In this way, we can locate the outermost layer as the code below
<Section> now:

The Code is as follows:
Body nav + section {}

Locate the next <section> element

It is the unique subset element under the <section> element of the outermost layer. This <section> element may be located like this:

The Code is as follows:
Section> section {}

Locate the <article> element

There are many methods to locate the <article> element, but the simplest method is the descendant selector:

The Code is as follows:
Section article {}

Locate the

These three elements appear in both places. One is in the <article> element, and the other is in the <aside> element. This difference allows us to easily locate each element.

The Code is as follows:
Article header {}
Article section {}
Article footer {}

Or define them together:

The Code is as follows:
Section header {}
Section {}
Section footer {}

So far, we have used the CSS2.1 selector to exclude all classes and IDs. So why do we still need to use CSS3? I'm glad you asked this question...

Use CSS3 for advanced positioning of HTML5 Elements

Although we have used the CSS2.1 selector to exclude all classes and IDs, it is clear that there are still many more complex cases that need to be solved by the advanced selector of CSS3. Let's take a look at the example to learn how to use CSS3 to locate page elements without using useless class and id attributes.

Use a unique log (post) ID to locate all logs

Wordpress provides us with a source code output that contains the ID of each log. This information is usually used for navigation and/or understanding the intent of the data, but CSS3 can use these unique IDs to define the style of these logs. Of course, you can also add attributes such as class = "post" for each log as usual, but this is in conflict with the intent of our practice (plus it does not have any fun ). With the "substring matching selector", we can locate all logs and their different elements as follows.

The Code is as follows:
Article [id * = post-] {}/* locate all logs */
Article [id * = post-] header h1 {}/ * locate the h1 tag in all logs */
Article [id * = post-] section p {}/* locate the p tag in all logs */

We can still use the same method to locate the comment elements and their child elements.

The Code is as follows:
Article [id * = comment-] {}/* locate all comments */
Article [id * = comment-] header h1 {}/* locate the h1 tag in all comments */
Article [id * = comment-] section p {}/* locate the p tag in all comments */

Locate specified sections or articles)

Many blogs have a large volume of logs and comments. HTML 5 may make up of <section> or <article> elements. To locate the specified <section> or <article> elements, we need to use the powerful ": nth-child" selector:

The Code is as follows:
Section: nth-child (1) {}/ * select the first <section> */
Article: nth-child (1) {}/ * select the first <article> */
Section: nth-child (2) {}/ * select the second <section> */
Article: nth-child (2) {}/ * select the second <article> */

Similarly, we can use the ": nth-last-child" selector to locate some elements in reverse order.

The Code is as follows:
Section: nth-last-child (1) {}/ * select the last <section> */
Article: nth-last-child (1) {}/ * select the last <article> */</p> <p> section: nth-last-child (2) {}/* select the second to last <section> */
Article: nth-last-child (2) {}/ * select the second to last <article> */

Select a specified element in more ways

Another method for selecting specific elements (such as header, section, and footer) in HTML5 is to take advantage of the ": only-of-type" selector. Because these HTML5 elements usually appear more than once in many places, this method is very convenient when we want to locate the tag that appears only once under the parent element. For example, we want to select only one element in an element, as shown in the following code:

The Code is as follows:
<Section>
<Section> </section>
<Section>
<Section> locate the section element </section>
</Section>
<Section>
<Section> locate the section element </section>
</Section>
<Section>
<Section> but this section element is not located </section>
<Section> and this section element </section>
</Section>
<Section> </section>
</Section>

We can only use the following row selector:

The Code is as follows:
Section> section: only-of-type {}

Once again, you can stubbornly add ID attributes for each element, but you will lose the scalability, maintainability, and absolute conciseness of the Code. CSS3 allows us to quickly and conveniently locate almost all page elements without ID and class attributes.

Summary

I believe that with time advances and more browser support, HTML5 and CSS3 will become more and more popular. They will bring more endless energy to web designers and bring our web Front-end to a higher level. (Text/ghost warriors)