Невероятно полезные фрагменты кода для CSS
Ниже приведены небольшие фрагменты кода (snippets), который минимизируют ваши страдания и сэкономят время при написании CSS кода и, я надеюсь, вы найдете их полезными. Независимого от того, опытный ли вы разработчик или только приступаете к изучению CSS, данные фрагменты кода могут существенно облегчить вам жизнь.
Сброс стилей от Eric Meyer's
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-правила для старых браузеров*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Источник
Всесторонний список CSS хаков для различных браузеров
/***** Хаки для селекторов ******/
/* IE6 и ниже */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (все кроме IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 и ниже, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }
/* Все кроме IE6-8 */
:root *>#quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* Firefox и ничего кроме. 1+ */
#veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
/***** Хаки для атрибутов ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Все кроме IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- действует также как !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */Источник
Новый mikro clearfix huck
Clearfix - очищение потока с сохранением структурной верстки
/* Для современных браузеров */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* Для IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
} Специфичное свойство zoom инициирует разметку в браузере IE6.
Больше информации о плавающих элементах и способе их «очистки» можно узнать в статье Плавающие элементы. Преодолеваем проблемы.
Размер шрифта при помощи REM
rem (‛root em‛) (корневой em) это размер шрифта базового элемента документа. В отличие от em, которая может быть разной для каждого элемента, rem является постоянной для всего документа.
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */Новый пуленепробиваемый синтаксис для @font-face.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}Статья о свойстве @font-face: CSS3 @font-face или как использовать любой шрифт на сайте
Источник
Обозначаем разные значения одного свойства для браузеров IE6, IE7 и IE8
Всего четыре буквы и вы можете задать разноплановые значения одного свойства браузерам IE6, IE7 и IE8. НЕ спрашивайте почему \9 работает для IE8...однако работает.
body {
color: red; /* для всез браузеров, безусловно */
color : green\9; /* IE8 и ниже */
*color : yellow; /* IE7 и ниже */
_color : orange; /* IE6 */
}Источник
Кроссбраузерная прозрачность на CSS
selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, старый safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}Источник
Удаляем обводку (outline) для браузеров WEBKIT
input[type="text"]: focus {
outline: none;
}Кроссбраузерная минимальная высота
#div {
min-height: 500px;
height:auto !important;
height: 500px;
}Кроссбраузерное свойство text-shadow (включая IE)
p {
text-shadow: #000000 0 0 1px;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1,
Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,
Color=#000000)";
}Замена текста изображением. Техника основанная на text-indent
h1 {
background: url(img/image.jpg) no-repeat;
height: 100px;
width: 500px;
display: block;
text-indent: -9999px;
}IE6/7 Двойное поле (margin) / Баг с отступом (padding)
ul li {
float: left;
margin-left: 5px;
*display: inline; /*IE7 and below*/
_display: inline; /*IE6 and below*/
}
/* в этом примере правим баг двойного поля */Удаляем полосу прокрутки (scrollbar) для textarea в IE
textarea {
overflow:auto;
}Меняем стиль у выделенного пользователем текста
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}Шрифты с google font api
Чтобы использовать шрифты от google font api, необходимо прописать следующую конструкцию внутри тега <head>:
/* <link rel="stylesheet"
type="text/css" href="http://fonts.googleapis.com
/css?family=Font+Name"> */
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine">/*CSS селектор {
font-family: 'Font Name', serif; }*/font-family: 'Tangerine', serif;Правильный line-height (межстрочный интервал) для тегов SUB и SUP
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }Стилизуем ссылки в зависимости от типа файла
/* внешние ссылки */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}CSS3 media queries
Media Queries, позволяют определить различные правила CSS для определенных условий, например, разных разрешений.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}Источник
По материалам статьи useful css snippets
Комментарии к статье