2016-12-29
We animate the buttons and check the site for the validity of the HTML and CSS code
Hello dear visitor!
Today we will consider, using the example of a created web page, how you can check the site for validity, namely, for compliance with the established specifications of the HTML and CSS languages.
In addition, before checking, we will make some revision of the CSS stylesheet in the part related to "animating" the sidebar buttons, where we will make the static buttons interactive, changing their appearance depending on their state - passive, active and pressed.
- Making the buttons three-dimensional
- Making buttons interactive
- Do you need validation
- How to validate HTML code
- How to validate CSS code
- Site source files
Making the buttons three-dimensional
In the previous article, we styled the main content area to match the layout of the home page. At the same time, at the moment there are buttons in the sidebar that are static and look like a regular flat brown rectangle with rounded corners.
Below is a snippet of a sidebar with these buttons.
In order to "animate" the buttons, let's first give them some volume with the help of CSS styles. And we will do this using the linear gradient property, which was previously used in the design of the rotator, search and subscription blocks.
The linear gradient values are defined as follows:
1. We will set the shades of colors from bottom to top, starting with a darker color than the main color of the button. To determine which color to use at the beginning of the gradient, we use the tool of a graphics editor, in this case Photoshop.
To do this, with an open design layout document, select the "Color Picker", move the cursor over the required area of the button, define the base color and then use the "Color Picker" tools to select a darker color of the same brown shade. In our case, let's take a color with the value "653939". How this can be done is clearly shown in the screenshot below.
2. Next, define the stop position of the gradient where the initial, darker color will transition to the main one. Place the stop position approximately in the middle. At the same time, in order to make a more saturated color, we will move the stop position up a little, and define its value, say, 70% of the height.
3. The last thing to do to assign properties to the gradient is to define a lighter color than the base color that will color the buttons at the top. This is done in the same way as when defining the initial color of the gradient. In this case, we will take the value of this color as "b88686".
3. Based on the received data, add a linear gradient to the previously generated CSS properties of the buttons.
input: {
height : 30px;
margin-bottom : 10px;
border-radius : 5px;
background : # a76d6d;
text-align : center;
font-weight : bold;
color : #fff;
float : right;
background-image
It can be noted that when determining the extreme colors, stop positions are not indicated here, since at values of 0% and 100% this is not necessary.
Now, let's refresh the browser and see the result.
As you can see, the buttons have acquired a slight bulge. Now you can start "revitalizing" them.
Making buttons interactive
In order to fully work with the buttons, we will make them interactive, which will visually reflect their three main states, passive (the button is in its initial state), active (the cursor is hovering over the button) and pressed (when the cursor is hovering, the mouse button is pressed and held).
And we will do this using a combination of shadow and border properties. The essence of this technique is that by changing the color of the shadow and borders from different sides, you can achieve an imitation of the change in the state of the buttons.
First, let's do this for the passive state and try to portray it so that the buttons rise above the surface.
We will choose the colors of the borders and shadows in the same way as in the previous cases.
The CSS code after the appropriate additions will take the form.
input: {
height : 30px;
margin-bottom : 10px;
border-radius : 5px;
background : # a76d6d;
text-align : center;
font-weight : bold;
color : #fff;
float : right;
background-image : linear-gradient (to top, # 653939, # a76d6d 50%, # b88686);
box-shadow : 2px 2px 4px 0px # 422a2a;
border-width : 2px;
border-style : solid;
border-color : #ddbebe # 241616 # 241616 #ddbebe;
It can be noted here that the borders are represented by a combination of properties that determine the thickness (border-width with the value 2px), a style (border-style) with a value that specifies a solid border and colors (border-color) on each of the four sides.
Let's update the browser and see how the buttons will now look.
As you can see, the buttons in this state seem to have lifted.
Now let's try to make the buttons look like a pressed state. To do this, we will remove the shadow, and change the color of the borders. In this case, we will use a special selector of the: hover pseudo-class corresponding to the active state.
The CSS for the active state of the buttons will look like this.
input: hover {
box-shadow : none;
border-color : # a76d6d # a76d6d # a76d6d # a76d6d;
In this case, we will change the color of the borders again and add a shadow, only in this case it will be internal and without offset. The pseudo-class selector will also change to: active, corresponding to the pressed state.
The CSS code for the pressed state will be as follows.
input: active {
box-shadow : 0px 0px 7px 2px # 422a2a inset;
border-color : # 777 #fff #fff # 777;
The "Search" button is shown below for comparison, where you can clearly see how it changes its appearance depending on the state.
Fig. 8 Passive state
This is where we finished the layout of the main page and brought it to a form that matches the design layout. And now we must, as before at each stage, check it for cross-compatibility in different browsers. But before that, let's check the page for validation, since the state of the code can to some extent affect cross-consistency. Therefore, now we will perform this very necessary operation.
Do you need validation
Validation is the verification of code against established standards. Distinguish between validation for correctness of HTML and CSS code. At the same time, it is clear that in one case the HTML code is checked, in the other the CSS code.
Probably, many will find it strange the question of whether validation is needed. But if you look on the Internet, you can see that there are many who believe that valid code is optional, that this is a waste of time, since browsers work well even in the presence of all kinds of errors.
Of course, in many cases, sites can work well on invalid code, but cross-consistency in such cases cannot be guaranteed. After all, there are standards for the programming languages themselves, but for the fact that browsers correct errors in the same way, such a standard, of course, does not exist and cannot be. And therefore, different browsers can handle errors in different ways, which can lead to different display of pages.
And in general, it is not clear why some people develop such a figurative attitude towards their work, according to the principle "it will do just that." Therefore, if someone believes that he does not need to check the code for validity, then this is his right, and he can hardly be convinced of the opposite, and there is no need.
Now let's move on to directly checking the validity of the codes, first HTML, then CSS.
How to validate HTML code
In essence, the code validation check itself is quite simple, as can now be seen. But, the elimination of errors usually takes a certain amount of time. Of course, if the code consists of several lines, then difficulties cannot arise here. But, if there are hundreds and thousands of them, then you may have to work hard, it all depends on how well the code was compiled. Therefore, it is better to do this more often with a joint cross-consistency check.
Here we will consider the simplest and most common variant of checking for validity - this is the use of the "W3C Consortium" site, which, with the support of browser developers, develops specifications for the codes of web pages.
To check the HTML code, just follow the link https://validator.w3.org/, where a page will open with a field for entering the address of the page being checked.
screenshot 51
After pressing the "Check" button, we will receive the result of the check.
In this case, the HTML code is valid, but there is a recommendation to use the lang attribute with the value "ru", since the page uses Russian.
The lang attribute is intended for browsers to display certain characters, such as quotation marks, correctly, depending on the language in use. Therefore, it will not be superfluous for us to include it in the HTML code. And we will do this in the html tag so that this attribute can affect the entire document.
How to make this add-on is shown in the following table.
"ru" >
. . .
And now, if we do a second check, we can see that the code has become completely valid without any comments.
In this way, we checked a file posted on the Internet. But when the page has not yet been posted on the web, you can check its validity in other ways, this is either upload the file using the browse button, or use the form to directly copy the HTML code.
The screenshot shows the last option, when the web page code is copied directly into the form for validation.
After performing the check, we get a similar result, and the checked code will also be shown here. In the event that errors are found, they will be highlighted to simplify the search, which greatly simplifies the work to eliminate them.
How to validate CSS code
We've covered HTML validation checking. The CSS code validation goes in exactly the same order. Only in this case, you need to use another validator page, which for such a case is located at http://jigsaw.w3.org/css-validator/.
Let's open it and, just like the previous time, enter the address of the page being checked, after which we press the "Check" button.
The result of this check is shown in the screenshot.
As you can see, our CSS code is fully compliant with the specification without any errors, which is a good result.
The order of the other verification methods for this case completely coincides with similar checks for HTML code. Therefore, we will not repeat ourselves here, and this is where we will end the consideration of validation checks.
After that, we will check our page for cross-matching and making sure that it is displayed the same on all browsers, at this we will complete the layout of the main page of the site.
And, we will deal with this immediately after the New Year holidays.
And in conclusion, you can wish everyone a Happy New Year! And wish you health, love, joy, prosperity and, of course, great success in creating your own website for the possibility of successful work on the Internet in the New Year!
Site source files
The source files of the site with the updates that were made in this article can be downloaded from the attached additional materials.
In one of my previous articles, I talked about. However, not everyone knows that besides validator for HTML, there is validator for CSS too.
Meaning CSS validity same as HTML: almost irrelevant. Similarly with Html if you write invalid CSS, then there will be no problems (unless, of course, there are gross errors), however, a valid code is always good. Such code is clear and structured, it is easy to understand, which is also important, especially when correcting, and especially by other people. Also CSS validity speeds up the processing process, and, consequently, the speed of loading pages.
And, finally, in view of the generally rare observance of validity, a valid code always commands respect, which is important if you are doing this professionally.
To check the validity of the CSS, you need to use this W3-service: http://jigsaw.w3.org/css-validator/.
I'll tell you right away that unlike Html, do CSS valid much simpler, since there are mostly only blunders, except which are best avoided altogether.
Let me summarize. It is not at all necessary to make the code valid, but I highly recommend doing this, since such a site will be easier to index by search engines ( HTML validity), faster to work, easier to edit, and respect from professionals.
Recently, I have received several questions from users regarding the validity of my themes and validation in general. In this post I want to answer them.
What is validity?
It is believed that the validity of a code is a single, universal characteristic of any code.
In fact, validity is the correspondence of the html code of the document to a certain set of rules specified in the doctype or implied in HTML5.
That is, validity is a relative concept, since the rules are different, and they also have requirements.
To make it clearer, I will give an example that I found on the site css-live.ru:
Different SNiPs (building codes and regulations) are applied to the construction of residential buildings and nuclear power plants, therefore a document valid according to one set of rules may not be valid otherwise (a nuclear power plant built according to the standards of a residential building would be good!).
Doctype usually points to the document on which html validation is planned, but can be chosen for pragmatic reasons to choose the optimal browser mode.
XHTML5 may not have a doctype at all, but be valid.
What is validation?
In simple terms, validation is the process of checking the code and bringing it into line with the chosen doctype (DTD).
How is validity checked?
The validity of HTML code is checked by a tool called a validator.
The most famous w3c validator is https://www.w3.org.
The w3c validator performs several code checks.
The main ones:
- Checking for syntax errors:
Example from habrahabr.ru/post/101985:is the correct syntax even though is an invalid HTML tag
So syntax checking is minimally useful for writing good HTML. - Checking nesting of tags:
In an HTML document, tags must be closed in the reverse order of opening. This check identifies unclosed or incorrectly closed tags. - HTML validation according to DTD:
Checking how the code matches the specified DTD - Document Type Definition (doctype). It includes checking for tag names, attributes, and tag "embedding" (tags of one type within tags of another type). - Check for foreign elements:
It will detect everything that is in the code, but is not in the doctype.
For example, custom tags and attributes.
To check the validity of CSS code, there is a css validator - http://jigsaw.w3.org/css-validator.
Code validity- this is the result of a mechanical check for the absence of formal OBs, according to the specified set of rules.
You need to understand that validation is a tool, not a value in itself.
Experienced layout designers usually know where to violate HTML or CSS validation rules, and where not, and what threatens (or does not threaten) this or that validation error.
Examples of when a site makes an invalid code:
- more convenient and faster - custom attributes for Javascrip / AJAX or
- SEO optimized - ARIA markup.
It is clear that there is no point in validity for the sake of validity.
As a rule, experienced layout designers adhere to the following rules:
- There should be no gross errors in the code.
- Minor can be tolerated, but only for valid reasons.
Regarding the validity of html / CSS validation errors:
Validation errors (OBs) can be divided into groups:
- OBs in template files:
They are not difficult to find and fix.
If any of the small mistakes help to make the site more functional or faster, you can leave them. - OB in third-party scripts connected on the site:
For example, a Vkontakte widget, a Twitter script or video files from YouTube.
It will not be possible to fix them in any way, since these files and scripts are located on other sites and we do not have access to them. - CSS rules the validator doesn't understand:
The validator checks that the site code matches a specific version of HTML or CSS.
If you used CSS version 3 rules in your template, and the validator checks for compliance with version 2.1, then it will consider all CSS3 rules as errors, although they are not. - OVs, which inevitably have to be left on the site in order to get the desired result. For example:
- noindex tags. They are not valid, but they are very necessary and you have to put up with it.
- khaki. To get the correct display of the site in some browsers, sometimes you have to use hacks - code that only a certain browser understands.
- Errors of the validator itself.
Often he does not see any tags (for example, closing tags) and reports about OB where it is not.
It turns out that on a working site there will almost always be some kind of OB.
Moreover, there can be a lot of them.
For example, the main pages of Google, Yandex, and mail.ru each contain several dozen errors.
But, they do not break the display of sites in browsers and do not interfere with their work.
Everything written above applies to my topics as well.
Complex topics have:
- WordPress functions (for example the_category ()) which give an invalid code.
- Video output from video hosting sites, for example, from YouTube, and there are a lot of OVs in the YouTube code that neither you nor I can influence.
- Buttons of social networks, which are connected using scripts of these networks and contain OB.
- CSS3 and HTML5 rules that legacy validators consider to be errors.
At the same time, the CSS3 and HTML5 version validators consider the old rules to be errors :). - Sometimes, in order to achieve correct display in Internet Explorer or older versions of other browsers, you have to use so-called hacks - code that only a particular browser understands in order to write rules for displaying the site specifically for this browser.
As a result, you can get a completely valid code only when you type in very simple topics, i.e. those that contain the minimum amount of functionality.
After finishing the layout of any of my themes, I always check it with a validator and fix all the OBs that can be corrected without losing the theme's functionality.
That is, if there is a choice between working functionality and validity, I choose the functionality.
If you are typesetting your themes, I advise you to do the same.
From my point of view (and also from the point of view of most layout designers), the attitude towards html / CSS validation as the ultimate truth is wrong. It is imperative to correct only those OVs that:
- prevent the browser from displaying the page correctly (unclosed and incorrectly nested tags).
- slow down page loading (incorrectly connected scripts).
- can be fixed without breaking the theme.
I hope I have answered all of the validation questions.
I have already mentioned what exists in terms of the validity of the html code. This should be done at least from time to time, because validity both html and css strongly affects the site, that is, the identical display of your resource in different browsers (general article about the popular and best web browsers, which, I hope, will help you make a choice in favor of one of them).
In addition, I have already mentioned, despite the fact that search engines at this stage do not take into account CSS and HTML code errors when ranking sites, in the future everything can change and you can get a situation where a beautifully designed, made for people project can lose some of the potential audience due to the fact that it did not pass validation. Well, okay, it's all lyrics, here everyone decides for himself how important everything is.
I think you are now familiar with my opinion, since I am writing this article, which means that I consider it worthy of attention along with, for example, such an important part of seo optimization as closing links and text fragments from indexing by Google and Yandex, or competent use.
Okay, as they say, more to the point. First, a little about CSS. CSS ( Cascading Style Sheets- Cascading Style Sheets) is a style language that defines the display of HTML documents. That is, if HTML describes the content of a page, then CSS formats this content, in other words, gives it a complete look. By the way, to improve the speed of your site it will be useful to host your theme files.
W3C validator: validating CSS code
Now let's move on to how to check the validity of a document (pages of our website or WordPress blog). Also, as in the case of checking HTML code, we will use one of the tools. Let's move on to the CSS validation service:
As you can see, there are three ways to check the validity of CSS using the W3C validator. By the way, note that there is a note at the bottom of the validator page that indicates that the HTML code needs to be checked for validity. Only both correct codes guarantee the correctness of the entire document. To check, enter the URL. For example, let's check the home page of my blog:
The result of the check by the W3C validator for CSS code errors cannot be called disappointing, since only 2 errors were found. Of course, these errors are different, in each case they cause different consequences. Let's see what we can do to eliminate them. Everything is convenient here, since the W3C validator gives not only a link to a document containing an incorrect code, but also the line number on which it is located. By the way, below, after the list of warnings and errors, a variant of the correct CSS code will be displayed, which can be used:
There is a link to the document on the CSS validation result page css.ie which is located in the theme folder. It was created to achieve a cross-browser blog (consistent display in popular browsers). Moreover, it is for various modifications of Internet Explorer, which suffers from various "jambs" in terms of distorting the look of the site, especially its older versions (IE9 is much better in this respect). Cross-browser compatibility is very important to the advancement of the project, but upon inspection it turned out that this document contains properties that do not comply with the W3C standards.
So, we get lines 3 and 12, which contain errors. To fix them, you should remove the parsing error html (filter: expression (document.execCommand ("BackgroundImageCache", false, true));) and property .zoom... Now I will not go into the intricacies of programming and layout of sites, I will only note that the property expression helps to get rid of the annoying flickering effect of background images that occurs in IE6.
That is, in the browser, the use of which comes to naught, and in subsequent versions this "glitch" is no longer observed. I must say right away that I will use this "medicine" for some time, until the number of potential visitors using IE6 reaches the minimum level. However, for clarity, to show you how the W3C validator will react to this, I'll remove it.
The .zoom property, which sets the zoom factor of an element, which is not part of the W3C International Standard, is supported by very old versions of Opera, Safari browsers, including IE8(Version 9 is almost completely "law-abiding", so soon, I hope, webmasters will be freed from the need to use hacks, that is, additional codes to achieve maximum cross-browser compatibility). Now let's look at the document containing invalid elements and correct it:
This document is located in my Cloudy theme folder, I am deleting the above items that did not pass the validation check. Further, in the results of the validation check, in addition to errors, there were also a lot of so-called warnings:
As an example, I will try to show clearly how to get rid of the most common of them, and along the way, explain their meanings. As you can see, the W3C validator warns about the presence of the same colors for text and background. I must say that this is generally undesirable in any case, since search engines may regard this state of affairs as hiding information, which is fraught with serious sanctions.
Of course, this is not always the case, but this danger cannot be underestimated. So, let's go directly to correcting the situation. Your best bet is to copy the file style.css your theme in HTML and PHP editor notepad ++, which I talked about and which makes searching by line number easier:
Now we know where these lines are located in your theme file, adjust the color by slightly changing the shade. In hexadecimal color, #ffffff represents white. We change it as follows: instead of the last f, we enter d, so we get a slightly different shade of white; now the changes will not be noticeable to users, but search engines will see the difference:
This is how you can correct the invalid parts of the CSS code of your resource pages. In the same way, we find the rest of the sections marked with warnings and which need to be corrected. As for the warnings concerning line 483 (there were, by the way, quite a few of them, about 10). Upon checking, I found that the cause was the WP Page Numbers plugin, which provides page navigation.
This pushed me to deactivate this plugin and was the reason that I finally replaced it with code injection, which was a step towards reducing server load. As soon as I did this, the warnings regarding the violation of the validity of the code by this particular plugin immediately disappeared after a second check. After the above gestures, we re-check the CSS validity using the W3C validator:
Now you know how to check the validity of a CSS document (web page of a site or blog) using the W3C validator. Finally, I would like to note that everyone decides for himself the degree and frequency of checking the validity of the CSS code, it all depends on the circumstances, but nevertheless, from time to time, this must be done without fail, in my deep conviction. Subscribe to blog updates to receive fresh materials by e-mail. Allow me to take leave, I hope we part for a little while.
Validation is the verification of a CSS code against the CSS2.1 or CSS3 specification. Accordingly, a correct code that does not contain errors is called valid, and that does not meet the specification is called invalid. The most convenient way to check the code is through the website. http://jigsaw.w3.org/css-validator/, using this service, you can specify the address of the document, upload a file or check the typed text. A big plus of the service is the support of the Russian and Ukrainian languages.
Check URI
This tab allows you to specify the address of a page hosted on the Internet. You don't have to write the http: // protocol, it will be added automatically (Fig. 1.42).
Rice. 1.42. Checking the document at
After entering the address, click on the "Check" button and one of two inscriptions will appear: "Congratulations! No errors found "if successful, or" Sorry, we found the following errors "if the code is invalid. Error or warning messages contain a line number, a selector, and a description of the error.
Check uploaded file
This tab allows you to load an HTML or CSS file and check it for errors (Figure 1.43).
Rice. 1.43. Checking a file while loading it
The service automatically recognizes the file type and, if an HTML document is specified, extracts the style for validation from it.
Check typed text
The last tab is intended for direct input of HTML or CSS-code, while only the style will be checked (Fig. 1.44).
Rice. 1.44. Checking the entered code
This option seems to be the most convenient for carrying out various experiments with the code or quickly checking small fragments.
Choosing a CSS version
CSS3 adds many new styling properties compared to the previous version, so code validation should be version-specific. By default, the service specifies CSS2.1, so if you want to check your code against CSS3, you must specify it explicitly. To do this, click on the text "Additional features" and in the opened block from the list "Profile" select CSS3
Rice. 1.45. Specifying the CSS version to check
Identifiers and classes
From time to time there is a debate about the advisability of using identifiers in the layout. The main reason is that identifiers are meant to be scripted to access and manipulate elements on a web page, and classes should be used exclusively to change element styles. There really is no difference what the styles are through, but there are a few things to keep in mind about identifiers and classes, as well as pitfalls that may await developers.
First, let's list the characteristic features of these selectors.
Identifiers
In the document code, each identifier is unique and must be included only once.
The identifier name is case sensitive.
Through the getElementById method, you can access an element by its identifier and change the element's properties.
The style for the identifier takes precedence over the classes.
Classes can be used multiple times in your code.
Class names are case sensitive.
Classes can be combined with each other by adding multiple classes to one tag.
Identifiers
If, while the web page is running, you need to change the style of some elements on the fly or display some text inside them, it is much easier with identifiers. The element is called through the getElementById method, the parameter of which is the name of the identifier. In example 1.70, an identifier named userName is added to the text field of the form, then using a JavaScript function it checks that the user has entered any text in this field. If there is no text, but the Submit button is pressed, a message is displayed inside the tag with the msg identifier. If everything is correct, the form data is sent to the address specified by the action attribute.
Example 1.70. Form data validation XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
