CSS principles

After careful analysis of HTML and CSS code that is constantly being reworked, conclusions can be drawn that should help the reader in this difficult task.
In this article we will not be attached to specific implementations and ready-made recipes in order to avoid the main problem of any CSS documentation - during the writing of the article a couple of browser updates will be released. And the advice will be simply useless.


I’ll start with the basic one : if in some browser the page is not displayed as intended, then you did something wrong. The creators of browsers, including IE6, are not fools. They thought with their heads before setting the rules for rendering and display. Any slipped element slips due to a special interpretation of the CSS properties set, and not because IE6 is buggy. Therefore, in order to solve the problem of a sliding element, you need to understand why it slid there.


Casually touch the concept of cross-browser compatibility . What is the recipe for cross-browser layout? Impose immediately for all supported browsers. Only for all at once. The rule “I put it up for firefox, and then I will fix it for the others” does not work. Go and then figure out who is to blame and what to do when the heap is already written is small CCS. Of course, in this case, “dirty hacks” and conditional comments will be used. Of course, you can’t do without hacks at all, because the differences in rendering are still present. What hacks you need to remember? None Minute search will give a ton of solutions. First you need to determine the list of browsers (platforms, versions, devices), some fundamental solutions will not allow to expand the list at the end of development. Do not think that I advise after each change to bypass the entire list and check if something has gone. The frequency of testing applications in different browsers is different. Begin to type in your favorite firefox with your favorite firebug. Periodically open IE7 to make sure that nothing has gone. A little less often we open the opera and safari and the ninth explorer. And very rarely - chrome.
By the way, this order of checking frequency in different browsers is easily explained. Firefox Gecko, although authentic among popular browsers, is very close to WebKit and Opera Presto. Safari and Chrome use WebKit and are almost completely identical in rendering algorithms. The latest version of browsers is still poorly understood and these browsers remain the dark horse of our race — especially the last IE. IE, the last but one, is fairly well compliant with standards, and does not cause much trouble, which is not the case with its younger brothers - the seventh (Trident V) and sixth (Trident IV) versions of the Internet explorer. With the advantage of the current situation, I can say that these two versions are very similar to each other - if it looks good in IE7, there is little to be corrected in IE6. Moreover, the reasons for supporting the sixth and seventh explorer are less and less.
')

As for CSS templates and frameworks . The largest particle transferred from a project to a project should be no more than a solution “how to arrange such and such elements in such and such a sequence”. Solutions like “three-column layout with pressed footer and horizontal menus” do not work due to the fact that their solution requires the generation of a heap of uncontrollable and hard-to-change code. Any change to an existing third-party solution will cause a headache and lead to a rewrite of the code from scratch.
In addition to this, it is worth considering the fact that such ready-made solutions in no way take into account subsequent changes to CSS: by changing the internal indents of the div inside .content , you cannot be sure that this will not cause a collapse at the menu level in the old version of IE.


Separately mention the structure of css files and images . There are a thousand and one ways to correctly distribute pictures and Tsesseski. But there are very few wrong ones.
Let us recall the worst of all the terrible ways - the only user.css user.css and daddy images with, excuse me, the pictures that were shit there. Some clever people guess that there must be some kind of structure in the resources and call pictures with prefixes and suffixes. For example, " article-bg.png " or " product-li-bg.png ". Let's move away from CSS and imagine the hard drive of such a developer. The films are in the same folder, but they name such files, for example: " alien_life_documental_discovery.avi " or " pelmeni_vs_pyatigorsk_kvn_2008_polufinal.avi ". With a large number of files it is impossible to navigate this small pile. Leave a controversy on the topic of autosport media libraries (iTunes, Windows Media Player or similar) for another article
Another example is not less terrible, but more accurate tactics of location and naming in the layout can serve this situation. Pictures are not located in the same folder, but are located in subfolders for the intended purpose. All kinds of backgrounds put in the folder images/bgs , icons - in the folder images/icons . This method is unsuccessful due to incorrect classification of resources. Great practicality will bring the separation of pictures not by similarity of use, but by logical similarity - all pictures belonging to the news should be placed in the images/news bg.png and called " bg.png ", " li.png ", " first-item.png " . This arrangement predisposes the division of resources, in consequence of which resources are easily controlled.
The logical question remains about the reuse of images for two different entities. An example is a design in which the line in the latest news list has the same background as the item in the product list. In this case, there are several solutions. For example, the background can be duplicated in two different folders articles and products . This should be done for the same reason as the minimum number of letters in the password of the user and the minimum length of the article title should not be one variable. Or, alternatively, rename the entity to a more general one and create the folder not articles and news_items , but somehow more generally, publications , or something like that. The name selector for a common entity between two entities is stretched. In the case of the same type of two different entities, they can be generalized by some criterion, because the designer has already done so. The case of the meager design of the “main page and one internal” we do not consider as clinical.
Also distributed algorithm skins for the location of files. In this case, inside the css-files indicates the relative path to the pictures and style sheets and pictures are put in one common folder. For example, in the root of the site, inside the themes folder create folders stylesheets and images . This in no way affects the folder structure inside the images folder. Please note that some frameworks provide only this way to integrate your own styles. Therefore, knowledge of the framework before the start of the layout is necessary. But that's another story.
And in the css-files, the backgrounds are indicated as follows:

 background-image: url(../images/articles/bg.png) 

Instead of specifying absolute paths (from the root).

 background-image: url(/images/articles/bg.png) 

Validations and validators are worth mentioning in the context of this topic. The designers of Lebedev’s studio say correctly that the best validator is a browser. If the page looks perfect in all kinds of browsers, then nothing to worry about. But it is worth remembering that the main trump card in a valid code is an adequate response to it by future browsers. Just an example. At the time of the third firefox becoming the author, a code was written in which a healthy bast of the text with all kinds of markup was placed inside the link:

 <a href="#" onclick="editMe(); return false;"> <p>Lorem ipsum dolor set...</p> </a> 

A click on an external link was processed, as a result of which the menu was dropped out and something did there that does not relate to the current topic. But after the release of Chrome, the author discovered that the above code does not work in the new browser. The problem was hidden in an invalid code - paragraphs cannot be placed inside the links (like any other blocking markers).

From the documentation : One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

As a result, the code was rewritten to meet the requirements of a valid code and problems were removed.
As a result, it can be stated that the standards must be observed as long as the standards themselves do not hinder the achievement of goals and there are no options to write code validly. In other words, always comply with the standards and violate this rule being self-righteous.