Markup independent elements
Developing the idea of layout with independent blocks, we will gradually come to the layout with independent modules , but for now let's dwell on the subject ...
But first a small terminological digression.
Page layout is the process of arranging elements on a page in accordance with the design.
')
Layout is:
Markup happens:
Depending on the purpose of the markup, different terms may be used to emphasize different sets of properties. For example, in the context of technology, the wheel is a disk with a tire; in the context of physics, an elastic body designed to reduce friction; in the context of geometry, contiguous cylinder and torus.
What is the semantics, for example, of user profile elements? From the point of view of the application, it is: name, surname, age, and so on. From the point of view, html is just abstract blocks of text. What is a table in the context of an application? Nothing! This is nothing more than a form of data presentation.
If we want to present our data in the form of a list - we use ul or dl, and if in the form of a table - table. In this case, the meaning of the data itself does not change - only their projection on html changes. Using certain tags from html for marking application data, we actually indicate not that “the user profile is a list of definitions”, but that “a user profile can be shown just like the list of definitions”. That is why the same dl according to the html4 specification marks both the actual definition lists, and dialogues that seem to have no relation to them.
So first of all we will enter some additional name spaces:
One is for purely visual purposes, the other is purely functional, and the third is for displaying the data structure. Styles and functionality can be superimposed on semantic elements, but only in the case when unification is needed on the whole project. For example, when you want to create a strong link between the username and the first red letter, as on the toy . At the same time, often semantics is in no way connected with visualization and must be placed into a separate element. Illustrative example:
Here "s: topic-title" means semantics, "a" means behavior, and "h1" means a visual role. Or, in simple terms, here we display the name of the topic, making it up as a first-level heading and endowing the functionality of the link. As a rule, the sequence of nesting is functional-visualization-semantics, but there may be exceptions.
On functional html-elements (a, button, form ..) it is better not to hang up additional visualization, so as not to create problems for yourself due to mixing functional and visual markup in one tag. It’s better to embed visuals directly into functional elements - this gives greater development flexibility.
In the selectors, the colon must be escaped. Like this:
A bonus from using your own tags is the ability to additionally set modifiers with classes:
This will work even in IE6, in contrast to the assignment of the intersection of the classes ".b-popup.s-opened" (! There is no space between them). As className it is convenient to use the hiqus format with a space and an equal sign as separators, as in the example of marking guitar chords .
But first a small terminological digression.
Page layout is the process of arranging elements on a page in accordance with the design.
')
Layout is:
- Tabular. The page is one big table with small cells. Each element occupies several adjacent cells forming a rectangular area that does not intersect with the others.
- Block. The page is divided into large blocks, those into smaller ones, and so on to the desired level of detail.
- Puff. Elements are positioned absolutely, regardless of the location of the other elements.
Markup happens:
- Visual. Recommendations for the visual presentation of information.
- Functional. The rules of interaction element with the user.
- Semantic. Declaration of element value in the context of the application.
Depending on the purpose of the markup, different terms may be used to emphasize different sets of properties. For example, in the context of technology, the wheel is a disk with a tire; in the context of physics, an elastic body designed to reduce friction; in the context of geometry, contiguous cylinder and torus.
What is the semantics, for example, of user profile elements? From the point of view of the application, it is: name, surname, age, and so on. From the point of view, html is just abstract blocks of text. What is a table in the context of an application? Nothing! This is nothing more than a form of data presentation.
If we want to present our data in the form of a list - we use ul or dl, and if in the form of a table - table. In this case, the meaning of the data itself does not change - only their projection on html changes. Using certain tags from html for marking application data, we actually indicate not that “the user profile is a list of definitions”, but that “a user profile can be shown just like the list of definitions”. That is why the same dl according to the html4 specification marks both the actual definition lists, and dialogues that seem to have no relation to them.
So first of all we will enter some additional name spaces:
< html <br> xmlns ="http://www.w3.org/1999/xhtml" <br> xmlns:v ="http://example.org/mark-up/visual" <br> xmlns:c ="http://example.org/mark-up/control" <br> xmlns:s ="http://example.org/mark-up/semantic" <br> >One is for purely visual purposes, the other is purely functional, and the third is for displaying the data structure. Styles and functionality can be superimposed on semantic elements, but only in the case when unification is needed on the whole project. For example, when you want to create a strong link between the username and the first red letter, as on the toy . At the same time, often semantics is in no way connected with visualization and must be placed into a separate element. Illustrative example:
< a href ="?topic:css-packaging" > <br> < h1 > <br> < s:topic-title > css-suki </ s:topic-title > <br> </ h1 > <br> </ a >Here "s: topic-title" means semantics, "a" means behavior, and "h1" means a visual role. Or, in simple terms, here we display the name of the topic, making it up as a first-level heading and endowing the functionality of the link. As a rule, the sequence of nesting is functional-visualization-semantics, but there may be exceptions.
On functional html-elements (a, button, form ..) it is better not to hang up additional visualization, so as not to create problems for yourself due to mixing functional and visual markup in one tag. It’s better to embed visuals directly into functional elements - this gives greater development flexibility.
In the selectors, the colon must be escaped. Like this:
s\:user {<br> font-weight: bold;<br> font-style: italic;<br> text-decoration: underline;<br> }A bonus from using your own tags is the ability to additionally set modifiers with classes:
c\:popup-root.opened\=true c\:popup-pane {<br> display: block;<br> }This will work even in IE6, in contrast to the assignment of the intersection of the classes ".b-popup.s-opened" (! There is no space between them). As className it is convenient to use the hiqus format with a space and an equal sign as separators, as in the example of marking guitar chords .
Source: https://habr.com/ru/post/96426/
All Articles