tips: css.rst@c2bfaae890f8 (annotated)

1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	1	.. -- coding: utf-8; --
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	2
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	3	=====
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	4	CSS
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	5	=====
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	6	.. contents::
1905 fba288d59662 Include only local subsections into TOC. This prevent duplication of Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1789 diff changeset	7	:local:
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	8
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	9	CSS specification
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	10	=================
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	11
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	12	Starting from CSS level 2 specification splited into individual modules. Each
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	13	module have own levels.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	14
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	15	CSS level 3 means CSS level 2 plus modules that refine and extend CSS 2.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	16
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	17	https://www.w3.org/TR/CSS/
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	18	Definition of CSS standards.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	19	https://www.w3.org/Style/CSS/
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	20	Home page for CSS specification umbrella.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	21	https://www.w3.org/Style/CSS/current-work
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	22	Status of all modules.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	23	https://www.w3.org/TR/CSS2/
2066 3d76849f1abf https://www.w3.org/TR/CSS21/ Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2065 diff changeset	24	CSS level 2 at latest rev.
3d76849f1abf https://www.w3.org/TR/CSS21/ Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2065 diff changeset	25	https://www.w3.org/TR/CSS21/
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	26	CSS level 2 rev 1.
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	27
2070 8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	28	Default style for HTML elements
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	29	===============================
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	30
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	31	* http://www.w3.org/TR/CSS2/sample.html
2070 8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	32
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	33	Adding CSS to HTML
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	34	==================
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	35
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	36	Include to CSS file in ``head`` tag::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	37
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	38	<html>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	39	<head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	40	<link href="path-to.css" rel="stylesheet" type="text/css">
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	41	</head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	42	...
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	43	<html>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	44
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	45	or embed style into ``style`` tag (that tag valid only in ``head`` tag)::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	46
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	47	<head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	48	<style type="text/css">
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	49	h1 {border-width: 1; border: solid; text-align: center}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	50	</style>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	51	</head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	52
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	53	HTML 5 standard doesn't require ``type`` attribute, above example may be
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	54	rewritten into::
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	55
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	56	<head>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	57	<style>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	58	h1 {border-width: 1; border: solid; text-align: center}
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	59	</style>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	60	</head>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	61
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	62	To change style of specific tag embedding into ``style`` attribute (style syntax
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	63	doesn't use selectors!)::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	64
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	65	<b style="color: blue; font-family: ariel">Welcome!</b>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	66
2067 700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	67	CSS encoding
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	68	============
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	69
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	70	``@charset`` rule should be the first sequence in CSS document without preceding
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	71	white spaces, should use double quotes and exactly one space between keyword and
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	72	charset::
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	73
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	74	@charset "UTF-8";
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	75
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	76	UTF BOM have precedence over ``@charset``.
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	77
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	78	Another source of encoding is HTTP header ``Content-Type`` that have highest
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	79	precedence::
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	80
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	81	Content-Type: text/css; charset=utf-8
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	82
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	83	Using ``charset`` attribute on the ``link`` element is deprecated by HTML5.
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	84
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	85	https://www.w3.org/International/questions/qa-css-charset.en
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	86	Declaring character encodings in CSS.
2068 cd5c05825627 @charset CSS at-rule at MDN. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2067 diff changeset	87	https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
cd5c05825627 @charset CSS at-rule at MDN. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2067 diff changeset	88	@charset CSS at-rule at MDN.
2067 700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	89
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	90	Selectors
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	91	=========
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	92	::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	93
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	94	tag {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	95	.class {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	96	#id {} для id разрешены символы
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	97	* {} - любой элемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	98
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	99	tag tag1 {} - выбор tag1, у которых есть предок tag
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	100	tag > tag {} - выбор дочернего элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	101	tag + tag {} - выбор соседних элементов
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	102	tag ~ tag {} - выбор любого соседа
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	103
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	104	[attr] {}
1433 933af00eae13 Selector by several attributes. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1408 diff changeset	105	[attr1][attr2] {}
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	106	[attr="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	107	[attr~="..."] {} - присутствует слово ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	108	[attr*="..."] {} - присутствует набор символов ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	109	[attr^="..."] {} - начинается с ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	110	[attr$="..."] {} - заканчивается на ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	111	tag [attr\|="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	112
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	113	:link - не посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	114	:visited - посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	115	:active - нажатие на левую клавишу мыши на элементе
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	116	:hover - назначать при наведении
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	117	:focus - при фокусировке элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	118	:first-child - первый подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	119	:last-child - последний подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	120
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	121	:first-line
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	122	:first-letter - выбрать первую букву (не приминимо к inline элементам)
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	123	:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	124	использовать счетчики)
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	125	:after{} - тоже, что и before, только ставит текст после контента тега
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	126
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	127	See:
4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	128
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	129	* https://www.w3.org/TR/CSS2/selector.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	130	* https://www.w3.org/TR/css3-selectors/#selectors
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	131	* https://www.w3.org/TR/CSS/#selectors
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	132
2071 15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	133	CSS import statement
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	134	====================
1408 085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	135
2071 15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	136	Any ``@import`` rules must precede all other at-rules and style rules in a style
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	137	sheet (besides ``@charset``)::
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	138
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	139	@import "common.css";
1408 085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	140	@import url("common.css");
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	141
2071 15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	142	Import statment supports media query syntax::
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	143
2071 15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	144	@import url("print.css") print;
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	145	@import url("bluish.css") projection, tv;
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	146	@import url("narrow.css") handheld and (max-width: 400px);
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	147
15c3e60f7faa Refine "CSS import statement". Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2070 diff changeset	148	https://www.w3.org/TR/css-cascade-3/#at-import
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	149	Importing Style Sheets: the @import rule.
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	150
2070 8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	151	Including font
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	152	==============
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	153	::
1461 f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	154
2070 8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	155	@font-face {
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	156	font-family: Gentium;
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	157	src: url(http://example.com/fonts/Gentium.woff);
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	158	}
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	159
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	160	p { font-family: Gentium, serif; }
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	161
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	162	https://www.w3.org/TR/css-fonts-3/
8ae2aee591e7 Reorder sections. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2069 diff changeset	163	CSS Fonts Module Level 3.
1461 f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	164
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	165	Media queries
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	166	=============
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	167
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	168	Syntax for media queries inside CSS file is::
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	169
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	170	@media print { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	171
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	172	@media (min-width: 400px) and (max-width: 600px) { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	173
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	174	@import url(print.css) print;
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	175
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	176	It is possible to link to CSS file with media queries with ``media`` attribute::
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	177
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	178	<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	179	<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	180	<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	181	<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	182
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	183	Possible predicates:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	184
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	185	``(min-width: VAL)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	186	Rules applied for any browser width over the value defined in the query.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	187	``(max-width: VAL)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	188	Rules applied for any browser width below the value defined in the query.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	189	``(min-height: VAL)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	190	Rules applied for any browser height over the value defined in the query.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	191	``(max-height: VAL)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	192	Rules applied for any browser height below the value defined in the query.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	193	``(orientation=portrait)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	194	Rules applied for any browser where the height is greater than or equal to the width.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	195	``(orientation=landscape)``
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	196	Rules for any browser where the width is greater than the height.
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	197
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	198	See:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	199
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	200	https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	201	Use CSS media queries for responsiveness
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	202
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	203	Viewport
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	204	========
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	205
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	206	Specs:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	207
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	208	https://www.w3.org/TR/css-device-adapt/
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	209	Unpublished: CSS Device Adaptation Module Level 1
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	210	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	211	``viewport`` attribute in ``meta`` tag.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	212	https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	213	Firefox mobile support for viewport.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	214	https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	215	Original viewport specs.
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	216
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	217	Compatibility:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	218
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	219	http://www.quirksmode.org/mobile/tableViewport.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	220	Compatibility table.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	221	http://viewportsizes.com/
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	222	Device table with viewport width.
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	223
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	224	Articles:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	225
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	226	http://www.quirksmode.org/mobile/viewports.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	227	How viewports and the widths of various important elements work, such as the
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	228	``<html>`` element, as well as the window and the screen.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	229	http://www.quirksmode.org/mobile/viewports2.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	230	How viewports and the widths of various important elements work, such as the
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	231	``<html>`` element, as well as the window and the screen.
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	232
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	233	CSS compilers
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	234	=============
1535 e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	235
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	236	http://lesscss.org/
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	237	LESS extends CSS with dynamic behavior such as variables,
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	238	mixins, operations and functions.
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	239	http://sass-lang.com/
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	240	Sass is the most mature, stable, and powerful professional grade
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	241	CSS extension language in the world.
1535 e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	242
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	243	CSS browser support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	244	===================
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	245
2228 837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	246	* http://www.quirksmode.org/css/contents.html
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	247	* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
837f1337c59b Removed indentation that compiled into <blockquote>. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2071 diff changeset	248	* https://www.css3.info/modules/selector-compat/
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	249
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	250	Editor support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	251	==============
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	252
2069 fbbac44cd95e Including font. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2068 diff changeset	253	Emacs::
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	254
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	255	$ sudo apt-get install css-mode
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	256
2069 fbbac44cd95e Including font. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2068 diff changeset	257	Graphical editor::
fbbac44cd95e Including font. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2068 diff changeset	258
fbbac44cd95e Including font. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2068 diff changeset	259	$ sudo apt-get install cssed

author	Oleksandr Gavenko <gavenkoa@gmail.com>
	Sun, 15 Sep 2019 23:40:51 +0300
changeset 2375	c2bfaae890f8
parent 2228	837f1337c59b
permissions	-rw-r--r--