HTML & CSS Aspects
This material contains aspects that are useful to know and remember the developer html. Part of the questions is devoted to IE - he himself refused to support IE6, however, knowing the peculiarities of his behavior would not be superfluous.
Standard:
Standards mode - stylesheets present in the document comply with the CSS 2.1 specification (latest versions)
Non-standard mode (backward compatibility mode):
Quirks mode - the browser ignores part of the CSS rules, imitating the behavior of the old engine.
Mode, close to the standard:
Almost standards mode - Opera, Firefox, Safari, in which the location of pictures in table cells is displayed in compatibility mode.
')
sel: pClass {
...
}
•: link - unvisited link (can be omitted)
•: visited - visited link
•: hover - pointing to a link
•: active - click on the link
•: focus - giving focus to the element (a, input, select, textarea)
•: first-child - applies to the first child element of the selector
•: lang (lang)
Pseudo-elements allow you to specify the style of elements that are not defined in the element tree, as well as generate content that is not in the source code of the document text.
•: first-line - first line style
•: first-letter - first character style
•: after {content: “...”; } - used to insert the assigned content after the item
•: before {content: “...”; } - used to insert the assigned content to the element
Cascading rules define the following priorities:
1) Custom styles marked with! Important
2) Author styles marked with! Important
3) Author's styles
4) Custom styles
5) Browser Default Styles
Specificity:
To calculate each type of selectors assigned a numeric value. Specificity is calculated by summing the value of each selector. The calculation takes place in a system with an indefinitely high base.
abcd
1) if the style is inline, a = 1
2) b is equal to the total number of ID selectors
3) c is equal to the total number of classes, pseudo-classes and attribute selectors
4) d is equal to the number of type selectors and pseudo-elements
hasLayout is an IE property that determines how an element is located in a stream, its size, positioning, reaction to events, and the effect on other elements. Basically, elements in Internet Explorer are not responsible for organizing themselves. The tag or may have a position, as in the source code and the flow of the document, but their content is ordered by the closest ancestor with the layout (usually). Such elements rely on the ancestor to make the whole heavy part for them by definition of size and units.
Items that have a default hasLayout:
• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee
The following values of the listed properties give the layout element (hasLayout = true):
• position: absolute
• float: left or right
• height, width: any value except auto
• display: inline-block
• zoom: any value except normal (invalid property)
• writing-mode: tb-rl
• overflow, overflow-x, overflow-y: auto | scroll | hidden (only in IE7)
• position: fixed (only in IE7)
• min-width, min-height: any value (only in IE7)
• max-width, max-height: any value except none (only in IE7)
To drop hasLayout, you need to specify a value other than those listed above (for example: width: auto or float: none).
Possible problems:
• floating elements are automatically cleared by elements having hasLayout
• relatively positioned elements do not get hasLayout
• external strips (margin) of adjacent elements having hasLayout do not merge
• the block hyperlink's click area without hasLayout is limited to the text area
1) Conditional comments:
2) Error with a double margin of floating elements:
Problem: In IE 6, a double margin is created for floating elements.
Solution: add display: inline.
3) Absolute positioning in a container positioned relative to:
Problem: absolutely positioned elements are in a container that is positioned relatively. As a result, the parent container has no hasLayout and absolutely positioned containers are placed relative to the viewport.
Solution: set the parent container hasLayout. Example: height: 1%.
4) Absolutely positioned containers inside absolutely / relatively positioned:
Problem: in IE, absolutely positioned containers inside relatively positioned when overlaid do not line up in accordance with z-index.
Solution: add z-index to the parent absolutely / relatively positioned elements.
1. Browser Modes
Standard:
Standards mode - stylesheets present in the document comply with the CSS 2.1 specification (latest versions)
Non-standard mode (backward compatibility mode):
Quirks mode - the browser ignores part of the CSS rules, imitating the behavior of the old engine.
Mode, close to the standard:
Almost standards mode - Opera, Firefox, Safari, in which the location of pictures in table cells is displayed in compatibility mode.
')
2. Selectors, pseudo-classes, pseudo-elements
1) Selectors:
- Tag selector - any HTML tag can be used as a selector for which the formatting rules are defined.
tagName {
property1: value1;
property2: value2;
…
}
tag name - case does not matter - The class selector - selectors in the document can be any number.
.className {
…
}
className - case sensitive - ID selector - the identifier determines the unique name of the element.
#idName {
…
}
idName - case sensitive - Context selectors - consists of tag selectors, class selectors, id selectors, etc., separated by spaces.
sel1 sel2 … {
…
} - Neighbor selectors are document elements when they follow each other in code. In CSS syntax, values are applied to the properties of the element following +
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
b, var - adjacentsel1 + sel2 {
…
} - Child selectors are located directly inside the parent element. In CSS syntax, style values apply only to a child element.
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
em - child psel1 > sel2 {
…
}
sel1 - parent selector
sel2 - child selector - Attribute selectors:
[attribute] {
…
} - Universal selector - defines the style for all elements of the document.
* {
…
}
2) Pseudo-classes:
sel: pClass {
...
}
•: link - unvisited link (can be omitted)
•: visited - visited link
•: hover - pointing to a link
•: active - click on the link
•: focus - giving focus to the element (a, input, select, textarea)
•: first-child - applies to the first child element of the selector
•: lang (lang)
3) Pseudo-elements:
Pseudo-elements allow you to specify the style of elements that are not defined in the element tree, as well as generate content that is not in the source code of the document text.
•: first-line - first line style
•: first-letter - first character style
•: after {content: “...”; } - used to insert the assigned content after the item
•: before {content: “...”; } - used to insert the assigned content to the element
3. Cascading and specificity
Cascading rules define the following priorities:
1) Custom styles marked with! Important
2) Author styles marked with! Important
3) Author's styles
4) Custom styles
5) Browser Default Styles
Specificity:
To calculate each type of selectors assigned a numeric value. Specificity is calculated by summing the value of each selector. The calculation takes place in a system with an indefinitely high base.
abcd
1) if the style is inline, a = 1
2) b is equal to the total number of ID selectors
3) c is equal to the total number of classes, pseudo-classes and attribute selectors
4) d is equal to the number of type selectors and pseudo-elements
4. hasLayout
hasLayout is an IE property that determines how an element is located in a stream, its size, positioning, reaction to events, and the effect on other elements. Basically, elements in Internet Explorer are not responsible for organizing themselves. The tag or may have a position, as in the source code and the flow of the document, but their content is ordered by the closest ancestor with the layout (usually). Such elements rely on the ancestor to make the whole heavy part for them by definition of size and units.
Items that have a default hasLayout:
• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee
The following values of the listed properties give the layout element (hasLayout = true):
• position: absolute
• float: left or right
• height, width: any value except auto
• display: inline-block
• zoom: any value except normal (invalid property)
• writing-mode: tb-rl
• overflow, overflow-x, overflow-y: auto | scroll | hidden (only in IE7)
• position: fixed (only in IE7)
• min-width, min-height: any value (only in IE7)
• max-width, max-height: any value except none (only in IE7)
To drop hasLayout, you need to specify a value other than those listed above (for example: width: auto or float: none).
Possible problems:
• floating elements are automatically cleared by elements having hasLayout
• relatively positioned elements do not get hasLayout
• external strips (margin) of adjacent elements having hasLayout do not merge
• the block hyperlink's click area without hasLayout is limited to the text area
5. IE bugs and solutions
1) Conditional comments:
<!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->
2) Error with a double margin of floating elements:
Problem: In IE 6, a double margin is created for floating elements.
Solution: add display: inline.
3) Absolute positioning in a container positioned relative to:
Problem: absolutely positioned elements are in a container that is positioned relatively. As a result, the parent container has no hasLayout and absolutely positioned containers are placed relative to the viewport.
Solution: set the parent container hasLayout. Example: height: 1%.
4) Absolutely positioned containers inside absolutely / relatively positioned:
Problem: in IE, absolutely positioned containers inside relatively positioned when overlaid do not line up in accordance with z-index.
Solution: add z-index to the parent absolutely / relatively positioned elements.
Source: https://habr.com/ru/post/128970/
All Articles