Кроссбраузерные фишки для браузеров

83

l17l

1 августа 2014, 00:44

1296

Здравствуйте, заинтересовался вопросом что бы сайт смотрелся во всех браузерах хорошо, читал что для этого нужно использовать Кроссбраузерные методы стилей и т.д

Подскажите какие фишки лучше всего ставить, что важное для сайта.

Я тут статью читал http://habrahabr.ru/post/139969/

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

А именно использование таких нововведений как border-radius, box-shadow, opacity, linear-gradient.

Скачал и поставил данный фаил, PIE-1.0.0

В файле увидел не один фвил.

PIE.htc

PIE.js

PIE_uncompressed.htc

PIE_uncompressed.js

PIE.htc - основной который подключают, а остальные зачем ???

как проверить правильно ли я подключил данный метод.

папка на сайте css в папку я закинул папку htc в этой папке файлы все эти.

css стиль лежит в папке css

пример стиля:

#ausait input {

border: 2px solid #3F4C6B;

margin: 10px;

padding: 10px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

-ms-border-radius: 6px;

border-radius: 6px;

font-size: 16px;

background-color: #fff;

box-shadow: 0 5px 10px #eee inset;

behavior: url(/htc/PIE.htc);

}

#ausait:hover input {

border: 2px solid #F48F2E;

-webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.75);

-moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.75);

-ms-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.75);

box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.75);

behavior: url(/htc/PIE.htc);

}

Правильно ли я подключил ?

Много css стилей где бордер радиус есть и бох шадов и т.д.

Очень не удобно было в каждый css стиль запихивать код, behavior: url(/htc/PIE.htc);

Реально ли как то по другому сделать ?

386

dkameleon

1 августа 2014, 01:47

#1

l17l:
Подскажите какие фишки лучше всего ставить, что важное для сайта.

важно ставить только то, что нужно для конкретной верстки.

наставить всякого мусора успеете ещё.

Дизайн интерьера (http://balabukha.com/)

L

83

l17l

1 августа 2014, 04:44

#2

dkameleon:
важно ставить только то, что нужно для конкретной верстки.
наставить всякого мусора успеете ещё.

ну так это я для ie9 ставил.

160

maldivec

1 августа 2014, 13:34

#3

l17l:
ну так это я для ie9 ставил.

Ну так ie9 все это нативно поддерживает. Кроме linear-gradient.

Забейте на это, пользователи ie8 и тем более ниже уже привыкли что у них нет закругленных уголков. Делайте нормальную современную верстку без лишних костылей.

1

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

29

yustnip

1 августа 2014, 13:40

#4

На днях посмотрел статистику браузера IE 8 и понял, что буду оптимизировать под него только в случае меганастойчивого желания заказчика. :)

L

83

l17l

1 августа 2014, 13:45

#5

yustnip:
На днях посмотрел статистику браузера IE 8 и понял, что буду оптимизировать под него только в случае меганастойчивого желания заказчика. :)

да я то же где то смотрел, что ie8 и ie9 не используют.

а как быть с телефонными брайзерами, сафари, и т.д андроид брайзер, айофновский.

29

yustnip

1 августа 2014, 13:52

#6

l17l:
да я то же где то смотрел, что ie8 и ie9 не используют.

а как быть с телефонными брайзерами, сафари, и т.д андроид брайзер, айофновский.

А что с ними не так? Они уже в большинстве своем все новые фишки понимают, а те, кто пользуется древними аппаратами, как правило не используют их для серфинга в сети.

L

83

l17l

2 августа 2014, 00:42

#7

yustnip:
А что с ними не так? Они уже в большинстве своем все новые фишки понимают, а те, кто пользуется древними аппаратами, как правило не используют их для серфинга в сети.

ну тогда я зря переживал )

---------- Добавлено 02.08.2014 в 11:18 ----------

Стоит ли такое использовать для мобильных устройств.

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 */

}

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Маркетинг для шоколадной фабрики. На 34% выше средний чек

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов