- → Верстка, Дизайн
- → CSS
- → Статьи
17 CSS + HTML альтернатив кроссбраузерной верстки
Действительно приходиться много труда приложить, чтобы достичь одного вида странички во всех браузерах. Вам не придется изобретать колесо каждый раз, если вы воспользуетесь этой подборкой кроссбраузерного HTML + CSS кода. Надеемся наш труд был не напрасен, а для вас будет полезен.
Цель данной статьи собрать полезные решения на HTML и CSS коде, соответственно кроссбраузерности. То есть, эти примеры кода будут отображаться во всех браузерах одинаково.
+IE – подразумевается поддержка функциональности кода в браузере Internet Explorer.
CSS + HTML сниппеты кроссбраузерного кода
- Минимальная и максимальная ширина блока (+IE)
- Кроссбраузерный RGBA цвет (+IE)
- Прозрачность (+IE)
- Вращение изображения / масштабирование (+IE)
- Полноразмерный фон (+IE)
- Фоновый шаблон или пулька без файла картинки
- Тень текста (+IE)
- Мульти border (+IE)
- Тень блока (+IE)
- Закругленные уголки
- Скрытие контента
- Не используйте скрытые абзацы
- Clearfix (+IE)
- @font-face (+IE)
- Кавычки цитаты без картинки
- CSS для iPhone4
- CSS горизонтальная и вертикальная ориентация для мобильных устройств
Минимальная и максимальная ширина блока
Многие из вас, до сих пор использовали стандартный min и max width… но Internet Explorer бывает выдает свои фокусы по этому поводу. В этом случае, можно использовать данное выражение, которое частично содержит JS код. Но, это наилучшее решение.
#content {
width: expression(document.body.clientWidth < 762? "760px" : document.body.clientWidth > 1242? "1240px" : "auto");
min-width: 760px;
max-width: 1240px;
}
Кроссбраузерный RGBA цвет
Здесь мы будем использовать некоторые IE фильтры для решения этой проблемы. С этим, RGB цвет будет работать в IE6 и выше версиях.
Функционирование RGB цвета в IE основано на использовании фильтра градиента. Мы установим один цвет в начало и конец градиента.
По классике жанра, первые две цифры определяют прозрачность цвета, все остальное кодировка самого цвета. Но, не знаю почему, прозрачность не работает корректно, впрочем, здесь она не нужна.
.element {
background-color: transparent;
background-color: rgba(255, 255, 255,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
}
Кроссбраузерная прозрачность
Что же, опять фильтры! В этом случае, мы будем использовать разные синтаксисы для IE8 и более ранних версий.
.selector {
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
filter: alpha(opacity=50); /* internet explorer 5~7 */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
Вращение изображения / масштабирование
Еще одна забавная штука, которую мало кто знает и пользуется ею. Существует еще один фильтр, который позволяет вращать изображение, но только к 90 градусам. Также вы можете делать отражение изображений.
img {
transform:
rotate(180deg)
scale(-1, 1);
/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(180deg)
scale(-1, 1);
-moz-transform:
rotate(180deg)
scale(-1, 1);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
/* opera */
-o-transform:
rotate(180deg)
scale(-1, 1);
}
Полноразмерный фон
Иногда приходиться влепить полноразмерный фон на страницу. Надеюсь вы не используете Java Script, так как можно сделать это с помощью CSS.
Вся магия заключается в создании div блока, который покрывает весь экран. Естественно фоном этого блока будет картинка.
.content {
position: relative;
width: 760px;
z-index: 10;
}
.background {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index:2;
}
.portrait {
height: 100%;
}
.landscape {
width: 100%;
}
.full {
width: 100%;
height: 100%;
}
<div class="content">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="background">
<img class="full | portrait | landscape" src="imgURL" alt="" />
</div>
Фоновый шаблон или пулька без файла картинки
Очень печально, что IE не позволяет использовать изображения в формате Base64. Лучший способ, использовать это для мобильных устройств. Я использую это для создания пулек, без файла картинки. Это удобно, так как, картинка небольшая по размеру, много текста не займет. Вот как вмонтировать ее в CSS код.
ul {
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==);
}
Тень текста
Опять возвращаемся к некоторым 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)";
}
Мульти border
Когда вам не достаточно однопиксельной рамки, вы можете использовать следующий метод. Притом, это работает в всех браузерах. Естественно для IE мы снова используем фильтры.
div {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
}
div:before {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
border-top: 1px solid #212121; /* top border! */
content: '';
}
div:after {
position: absolute;
width: 100%;
height: 100%;
top: 1px;
border-bottom: 1px solid #212121; /* bottom border! */
content: '';
}
Тень блока
Тот же фильтр, который мы использовали для создания мульти бордера, будем использовать для создания тени к div блоку.
.shadow {
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
box-shadow: 0 0 4px #000;
}
Закругленные уголки
Огорчительным является то, что для решения одной задачи, каждому браузеру приходиться объяснять по-своему. Ничего с этим не поделаешь, иначе не достигнешь кроссбраузерности верстки.
.rounded {
-moz-border-radius: 10px; /* gecko */
-webkit-border-radius: 10px; /* webkit */
border-radius: 10px; /* CSS3 standard */
-khtml-border-radius: 10px; /* old konkeror */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
Скрытие контента
Иногда приходиться скрывать некоторый контент, как правило вы пользуетесь display:none. Сегодня я предложу немного другой подход к решению данной проблемы, так как это свойство не каждый браузер поддерживает. Но, вам нужно помнить, что скрытия контента – это риск попасть под санкции поисковых систем.
.hidden {
position: absolute;
top: -10000px;
left: -10000px;
}
Не используйте скрытые абзацы
Раз мы уж начали говорить за скрытие контента, мой совет, не используйте скрытые абзацы внутри h1 тега, ради SEO. Лучше использовать alt атрибут к изображению, так более семантично и релевантно по отношению к поисковым роботам.
<h1><img src="myLogo" alt="My company" /></h1>
Clearfix
Многие из вас знают об использовании .clearfix способа корректировки высоты, когда используете обтекание float. Что же, во многих случаях, большое количество кода может быть заменено двумя строками.
.clearfix {
zoom:1;
overflow:hidden;
}
@font-face
Если вы еще используйте стандартные шрифты, потому что не доверяете свойству @font-face, бросьте. Сегодня мы реализуем кроссбраузерное подключение внешних шрифтов. Можете наслаждаться красивыми шрифтами на своем сайте.
@font-face {
font-family: 'MandatoryRegular';
src: url('font/mandator-webfont.eot');
src: url('font/mandator-webfont.eot?#iefix') format('embedded-opentype'),
url('font/mandator-webfont.woff') format('woff'),
url('font/mandator-webfont.ttf') format('truetype'),
url('font/mandator-webfont.svg#MandatoryRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Кавычки цитаты без картинки
Это можно сделать с помощью псевдоэлемента before. И это не сложно, всего несколько строк CSS кода, что гораздо меньше размера картинки, которую многие используют до сих пор.
blockquote:before {
display: block;
float: left;
margin: 10px 15px 0 0;
font-size: 100px; /* let's make it a big quote! */
content: open-quote; /* here we define our :before as a smart quote. It could be any content, even the HTML entity alternative to this opening quote, that is “ */
color: #bababa;
text-shadow: 0 1px 1px #909090;
}
CSS для iPhone4
Так как время не стоит на месте, технологии развиваются все быстрее, мы имеем более мощные мобильные устройства. Хорошей практикой является разрабатывать сайты для мобильных устройств. Для этого приходиться упрощать картинки и некоторую структуру страниц.
Так как iPhone4 имеет большее разрешение экрана, ваше старое лого, может выглядеть слишком маленьким. Это можно решить с помощью нескольких строк CSS кода.
@media handheld, only screen and (max-width: 767px) {
.logo {
/* common low-res and low-size, of course */
background: url(logo.jpg) no-repeat;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background: url(logo2x.jpg) no-repeat;
background-size: 212px 303px;
}
}
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 */
}
После слов
Вот наша подборка полезных кусков кроссбраузерного HTML + CSS кода. Это все было проверено на собственном опыте. Если у вас есть что добавить, или возникли вопросы, будем рады выслушать в комментариях ниже.
Вы можете расширить свои знания о кроссбраузерной верстке, читая следующие материалы:
Кроссбраузерная верстка – что это такое? – описаны альтернативы, развитие и взгляд в будущее.
Кроссбраузерная верстка CSS – маленькие хитрости, как достичь кроссбраузерности CSS кода.
Источник материала ...
Дальше: Как увеличить целевой трафик на сайт? 100% гарантия притока трафика!
Development — Taras Moroz