Наследование в html

Selector	Example	Example description	CSS
.class	.intro	Selects all elements with class="intro"	1
#id	#firstname	Selects the element with id="firstname"	1
*	*	Selects all elements	2
element	p	Selects all <p> elements	1
element,element	div, p	Selects all <div> elements and all <p> elements	1
element element	div p	Selects all <p> elements inside <div> elements	1
element>element	div > p	Selects all <p> elements where the parent is a <div> element	2
element+element	div + p	Selects all <p> elements that are placed immediately after <div> elements	2
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute]	[target]	Selects all elements with a target attribute	2
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"	2
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"	3
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"	3
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"	3
:active	a:active	Selects the active link	1
::after	p::after	Insert content after every <p> element	2
::before	p::before	Insert content before the content of every <p> element	2
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-child	p:first-child	Selects every <p> element that is the first child of its parent	2
::first-letter	p::first-letter	Selects the first letter of every <p> element	1
::first-line	p::first-line	Selects the first line of every <p> element	1
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:focus	input:focus	Selects the input element which has focus	2
:hover	a:hover	Selects links on mouse over	1
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elemets with an invalid value	3
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)	2
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:link	a:link	Selects all unvisited links	1
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no "required" attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified	3
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified	3
:required	input:required	Selects input elements with the "required" attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3
:visited	a:visited	Selects all visited links	1

Решение для SVG на странице

Вот встретил интересное решение, принцип такой, если браузер понимает фон-градиент, значит и SVG понимает, ели не понимает, тогда видит только PNG картинку на фоне, а SVG не видит.

.uxa-logo {
/*Renders a png background image*/
background: transparent url(../img/uber-architects-logo.png) center center no-repeat;

/*Modern browser supporting linear gradients will render an svg over the png*/
background-image: -webkit-linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);
background-image: -moz-linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);
background-image: linear-gradient(transparent, transparent), url(../img/uber-architects-logo.svg);

background-size: 100% 100%;
height: 50px;
width: 50px;
}

P.S.> Зачем SVG ?  - лично я использую как графику для дисплеев типа ретина, PNG + SVG более компактное решение чем PNG + PNG (144 dpi)...  

Адаптивная верстка

Вот на хабре нашел интересную штуку тут оригинал


<html> <head> <script type="text/javascript"> (function(){ // Выполняем код только на мобильных браузерах (на всякий случай) if (typeof(window.orientation) !== 'undefined') { // Функция взята отсюда: https://makandracards.com/makandra/13743-detect-effective-horizontal-pixel-width-on-a-mobile-device-with-javascript function getDeviceWidth() { var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height; // iOS returns available pixels, Android returns pixels / pixel ratio // http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) deviceWidth = deviceWidth / window.devicePixelRatio; return deviceWidth; } var deviceWidth = getDeviceWidth(); var maxWidth = 900; if (deviceWidth < maxWidth) { // Мои эксперименты на iPad 2 показали, что device-width всегда содержит значение ширины // экрана в книжной (portrait) ориентации (т.е. даже, если устройство находится в // альбомной (landscape) ориентации). Это же утверждалось в некоторых найденных мною статьях. if (window.orientation == 0 || window.orientation == 180) document.write(''); else document.write(''); } else document.write(''">'); } })(); </script> <style type="text/css"> * { margin: 0; padding: 0; } .content { min-width: 320px; max-width: 900px; background: #ffff99; } .content div { border: 1px solid #f00; } </style> </head> <body> <div class="content"> <div> abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </div> </div> </body> </html>

Сглаживание шрифтов в web

так подключаються шрифты:

@font-face {
    font-family: 'fontRegular';
    src: url('../fonts/font-webfont.eot');
    src: url('../fonts/font-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font-webfont.woff') format('woff'),
         url('../fonts/font-webfont.ttf') format('truetype'),
         url('../fonts/font-webfont.svg#fontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

теперь магия :) весь фокус в том что (во всяком случаи хром) видет и truetype шрифтовый и svg красивый :), так вот что бы было красиво надо svg подключать поверх трутайпа... тоесть так:

@font-face {
    font-family: 'fontRegular';
    src: url('../fonts/font-webfont.eot');
    src: url('../fonts/font-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font-webfont.svg#fontRegular') format('svg'),
         url('../fonts/font-webfont.woff') format('woff'),
         url('../fonts/font-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

ещё есть варианты, поиграться с цсс типа: text-shadow, -webkit-font-smoothing, text-rendering...

text-overflow...

Бывает когда нужно что бы конец текста обрезался и добавлялось "...", ну или просто обрезался.
Есть такое свойство text-overflow, и 2 значения clip и ellipsis.
Иногда помогает, хотя официально в спецификации его кажется до сих пор нету...

Мнемоники (Спец. символы) 2

Мнемоники (Спец. символы) - тут накопипастил кучу спец. символов... но чёта вечно не хватает, решил добавить парочку)

⊕ - &oplus;
★ - &#9733;
⇆ - &#8646;

► - &#9658;
◄ - &#9668;
▼ - &#9660;
▲ - &#9650;

▌ - &#9612;
▄ - &#9604;
■ - &#9632;
▀ - &#9600;
▐ - &#9616;

☂ - &#9730;
♪ - &#9834;
☛ - &#9755;

ꙩ - ꙩ
Ꙩ - Ꙩ

Ну и знак рубля... (не во всех шрифтах есть, в 'PT Sans' есть точно, подключить шрифт можно через гугл фонт)
⃏ - &#8399;

Перехват адреса (url) java-script

Задача: вытянуть скриптом параметр какой передается в адресной строке(url) при переходе с другой страницы.

Url содержиться в переменной - location, точнее window.location, и имеет несколько параметов:

window.location.host   skifcheg.blogspot.com:80
window.location.hostname   skifcheg.blogspot.com
window.location.port   80
window.location.protocol   http
window.location.pathname   index.php
window.location.href   http://skifcheg.blogspot.com:80/index.php#id
window.location.hash   #id

Допустим нам нужно параметр id,  берем и пишем что то типа var i =  window.location.hash;
Но в i  записалось " #id" а нам нужно  id  без решетки.   тут поможет функция по обрезанию слов))) их есть несколько, возьмем например  substring,

наша   i =  i.substring(1), и теперь  i приняло значения  id потому что мы отрезали первый символ, то есть начали записывать со второго символа,   например "Вася".substring(1,2) = ас  с второго символа по третий включно. всё отрезали.