tips: css.rst@700f340fa4ef (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
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	28	Adding CSS to HTML
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	29	==================
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	30
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	31	Include to CSS file in ``head`` tag::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	32
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	33	<html>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	34	<head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	35	<link href="path-to.css" rel="stylesheet" type="text/css">
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	36	</head>
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
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	40	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	41
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	42	<head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	43	<style type="text/css">
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	44	h1 {border-width: 1; border: solid; text-align: center}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	45	</style>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	46	</head>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	47
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	48	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	49	rewritten into::
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	50
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	51	<head>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	52	<style>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	53	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	54	</style>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	55	</head>
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	56
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	57	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	58	doesn't use selectors!)::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	59
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	60	<b style="color: blue; font-family: ariel">Welcome!</b>
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	61
2067 700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	62	CSS encoding
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	63	============
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	64
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	65	``@charset`` rule should be the first sequence in CSS document without preceding
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	66	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	67	charset::
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	@charset "UTF-8";
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	70
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	71	UTF BOM have precedence over ``@charset``.
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	72
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	73	Another source of encoding is HTTP header ``Content-Type`` that have highest
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	74	precedence::
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	Content-Type: text/css; charset=utf-8
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	Using ``charset`` attribute on the ``link`` element is deprecated by HTML5.
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	79
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	80	https://www.w3.org/International/questions/qa-css-charset.en
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	81	Declaring character encodings in CSS.
700f340fa4ef CSS encoding. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 2066 diff changeset	82
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	83	Selectors
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	84	=========
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	85	::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	86
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	87	tag {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	88	.class {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	89	#id {} для id разрешены символы
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	90	* {} - любой элемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	91
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	92	tag tag1 {} - выбор tag1, у которых есть предок tag
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	93	tag > tag {} - выбор дочернего элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	94	tag + tag {} - выбор соседних элементов
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	95	tag ~ tag {} - выбор любого соседа
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	96
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	97	[attr] {}
1433 933af00eae13 Selector by several attributes. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1408 diff changeset	98	[attr1][attr2] {}
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	99	[attr="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	100	[attr~="..."] {} - присутствует слово ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	101	[attr*="..."] {} - присутствует набор символов ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	102	[attr^="..."] {} - начинается с ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	103	[attr$="..."] {} - заканчивается на ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	104	tag [attr\|="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	105
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	106	:link - не посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	107	:visited - посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	108	:active - нажатие на левую клавишу мыши на элементе
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	109	:hover - назначать при наведении
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	110	:focus - при фокусировке элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	111	:first-child - первый подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	112	:last-child - последний подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	113
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	114	:first-line
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	115	:first-letter - выбрать первую букву (не приминимо к inline элементам)
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	116	:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	117	использовать счетчики)
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	118	:after{} - тоже, что и before, только ставит текст после контента тега
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	119
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	120	See:
4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	121
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	122	* https://www.w3.org/TR/CSS2/selector.html
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	123	* https://www.w3.org/TR/css3-selectors/#selectors
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	124	* https://www.w3.org/TR/CSS/#selectors
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	125
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	126	CSS include statement
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	127	=====================
1408 085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	128	::
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	129
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	130	@import url("common.css");
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	131
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	132	Include statment supports media query syntax::
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	133
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	134	@import url(print.css) print;
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	135
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	136	Default style for HTML elements
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	137	===============================
1461 f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	138
f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	139	* http://www.w3.org/TR/CSS2/sample.html
f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	140
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	141	Media queries
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	142	=============
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	143
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	144	Syntax for media queries inside CSS file is::
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	145
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	146	@media print { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	147
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	148	@media (min-width: 400px) and (max-width: 600px) { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	149
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	150	@import url(print.css) print;
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	151
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	152	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	153
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	154	<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	155	<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	156	<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	157	<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	158
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	159	Possible predicates:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	160
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	161	``(min-width: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	162	Rules applied for any browser width over the value defined in the query.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	163	``(max-width: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	164	Rules applied for any browser width below the value defined in the query.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	165	``(min-height: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	166	Rules applied for any browser height over the value defined in the query.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	167	``(max-height: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	168	Rules applied for any browser height below the value defined in the query.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	169	``(orientation=portrait)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	170	Rules applied for any browser where the height is greater than or equal to the width.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	171	``(orientation=landscape)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	172	Rules for any browser where the width is greater than the height.
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	See:
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	https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	177	Use CSS media queries for responsiveness
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	178
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	179	Viewport
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	180	========
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	181
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	182	Specs:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	183
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	184	https://www.w3.org/TR/css-device-adapt/
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	185	Unpublished: CSS Device Adaptation Module Level 1
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	186	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	187	``viewport`` attribute in ``meta`` tag.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	188	https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	189	Firefox mobile support for viewport.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	190	https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	191	Original viewport specs.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	192
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	193	Compatibility:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	194
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	195	http://www.quirksmode.org/mobile/tableViewport.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	196	Compatibility table.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	197	http://viewportsizes.com/
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	198	Device table with viewport width.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	199
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	200	Articles:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	201
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	202	http://www.quirksmode.org/mobile/viewports.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	203	How viewports and the widths of various important elements work, such as the
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	204	``<html>`` element, as well as the window and the screen.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	205	http://www.quirksmode.org/mobile/viewports2.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	206	How viewports and the widths of various important elements work, such as the
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	207	``<html>`` element, as well as the window and the screen.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	208
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	209	CSS compilers
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	210	=============
1535 e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	211
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	212	http://lesscss.org/
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	213	LESS extends CSS with dynamic behavior such as variables,
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	214	mixins, operations and functions.
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	215	http://sass-lang.com/
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	216	Sass is the most mature, stable, and powerful professional grade
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	217	CSS extension language in the world.
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	218
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	219	CSS browser support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	220	===================
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	221
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	222	* http://www.quirksmode.org/css/contents.html
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	223	* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	224	* https://www.css3.info/modules/selector-compat/
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	225
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	226	Editor support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	227	==============
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	228
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	229	Emacs
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	230	-----
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	231	::
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	232
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	233	$ sudo apt-get install css-mode
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	234
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	235	Graphical editor
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	236	----------------
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	237	::
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	238
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	239	$ sudo apt-get install cssed

author	Oleksandr Gavenko <gavenkoa@gmail.com>
	Sat, 28 Jan 2017 15:22:09 +0200
changeset 2067	700f340fa4ef
parent 2066	3d76849f1abf
child 2068	cd5c05825627
permissions	-rw-r--r--