tips: css.rst@3d76849f1abf (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
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	62	Selectors
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	63	=========
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	64	::
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	65
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	66	tag {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	67	.class {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	68	#id {} для id разрешены символы
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	69	* {} - любой элемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	70
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	71	tag tag1 {} - выбор tag1, у которых есть предок tag
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	72	tag > tag {} - выбор дочернего элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	73	tag + tag {} - выбор соседних элементов
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	74	tag ~ tag {} - выбор любого соседа
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	75
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	76	[attr] {}
1433 933af00eae13 Selector by several attributes. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1408 diff changeset	77	[attr1][attr2] {}
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	78	[attr="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	79	[attr~="..."] {} - присутствует слово ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	80	[attr*="..."] {} - присутствует набор символов ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	81	[attr^="..."] {} - начинается с ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	82	[attr$="..."] {} - заканчивается на ... в поле атрибута
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	83	tag [attr\|="..."] {}
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	84
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	85	:link - не посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	86	:visited - посещенные ссылки
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	87	:active - нажатие на левую клавишу мыши на элементе
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	88	:hover - назначать при наведении
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	89	:focus - при фокусировке элемента
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	90	:first-child - первый подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	91	:last-child - последний подэлемент
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	92
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	93	:first-line
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	94	:first-letter - выбрать первую букву (не приминимо к inline элементам)
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	95	:before{content:"..."}, ставит перед контентом элементов строку xxx (можно
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	:after{} - тоже, что и before, только ставит текст после контента тега
d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	98
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	99	See:
4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	100
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	101	* https://www.w3.org/TR/CSS2/selector.html
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	102	* https://www.w3.org/TR/css3-selectors/#selectors
178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	103	* https://www.w3.org/TR/CSS/#selectors
1389 4ab574ec7067 Add links to standard. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1334 diff changeset	104
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	105	CSS include statement
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	106	=====================
1408 085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	107	::
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	108
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	109	@import url("common.css");
085cde50fc0c CSS include statement. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1389 diff changeset	110
1919 83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	111	Include statment supports media query syntax::
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	112
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	113	@import url(print.css) print;
83069b397c1f Include statment supports media query syntax Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1912 diff changeset	114
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	115	Default style for HTML elements
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	116	===============================
1461 f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	117
f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	118	* http://www.w3.org/TR/CSS2/sample.html
f030b717a402 Default style for HTML elements. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1433 diff changeset	119
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	120	Media queries
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	121	=============
1045 d69b7a836498 CSS Browser support. Oleksandr Gavenko <gavenkoa@gmail.com> parents: diff changeset	122
1924 46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	123	Syntax for media queries inside CSS file is::
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	124
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	125	@media print { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	126
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	127	@media (min-width: 400px) and (max-width: 600px) { ... }
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	128
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	129	@import url(print.css) print;
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	130
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	131	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	132
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	133	<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	134	<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	135	<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	136	<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	137
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	138	Possible predicates:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	139
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	140	``(min-width: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	141	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	142	``(max-width: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	143	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	144	``(min-height: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	145	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	146	``(max-height: VAL)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	147	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	148	``(orientation=portrait)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	149	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	150	``(orientation=landscape)``
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	151	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	152
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	153	See:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	154
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	155	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	156	Use CSS media queries for responsiveness
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	157
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	158	Viewport
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	159	========
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	Specs:
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	162
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	163	https://www.w3.org/TR/css-device-adapt/
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	164	Unpublished: CSS Device Adaptation Module Level 1
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	165	https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	166	``viewport`` attribute in ``meta`` tag.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	167	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	168	Firefox mobile support for viewport.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	169	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	170	Original viewport specs.
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	Compatibility:
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	http://www.quirksmode.org/mobile/tableViewport.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	175	Compatibility table.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	176	http://viewportsizes.com/
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	177	Device table with viewport width.
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	Articles:
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	http://www.quirksmode.org/mobile/viewports.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	182	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	183	``<html>`` element, as well as the window and the screen.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	184	http://www.quirksmode.org/mobile/viewports2.html
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	185	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	186	``<html>`` element, as well as the window and the screen.
46a080141f3a Media queries, Viewport Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1921 diff changeset	187
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	188	CSS compilers
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	189	=============
1535 e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	190
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	191	http://lesscss.org/
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	192	LESS extends CSS with dynamic behavior such as variables,
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	193	mixins, operations and functions.
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	194	http://sass-lang.com/
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	195	Sass is the most mature, stable, and powerful professional grade
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	196	CSS extension language in the world.
e499cb39b573 CSS frameworks. CSS compilers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1461 diff changeset	197
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	198	CSS browser support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	199	===================
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	200
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	201	* http://www.quirksmode.org/css/contents.html
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	202	* http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29
2065 178383c735a5 CSS specification. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1924 diff changeset	203	* https://www.css3.info/modules/selector-compat/
1920 3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	204
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	205	Editor support
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	206	==============
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	207
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	208	Emacs
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	209	-----
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	210	::
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	211
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	212	$ sudo apt-get install css-mode
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	213
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	214	Graphical editor
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	215	----------------
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	216	::
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	217
3f7837be0d17 Fix headers. Oleksandr Gavenko <gavenkoa@gmail.com> parents: 1919 diff changeset	218	$ sudo apt-get install cssed

author	Oleksandr Gavenko <gavenkoa@gmail.com>
	Sat, 28 Jan 2017 14:38:54 +0200
changeset 2066	3d76849f1abf
parent 2065	178383c735a5
child 2067	700f340fa4ef
permissions	-rw-r--r--