Definisanje starog css pretraživača. CSS - Prefiksi pretraživača

U ovom ćemo članku pogledati što su prefiksi preglednika, razloge njihove pojave i kako ih koristiti u CSS-u.

Šta su prefiksi?

Web programer koji počinje da uči teorijske osnove CSS-a i upotrebljavajući to znanje u praksi može naići na probleme kada pogledamo primjere iz stvarnog svijeta. To mu može uzrokovati nerazumijevanje onoga što se događa i obeshrabriti daljnju želju za proučavanjem ove tehnologije.

Na primjer, prilikom razmatranja stilova web stranice, web programer može naići na svojstva koja ispred sebe sadrže neke nejasne riječi: -webkit-, -moz-, -ms-, itd.

   * (-webkit-box-dimenzioniranje: border-box; -moz-veličina kutije: border-box; veličina kutije: border-box;)

Šta je ovo? Zapravo, sve je jednostavno, ove su nejasne riječi prefiksi sljedećih pretraživača:

• -webkit-: preglednici Chrome, Safari, Opera;
• -moz-: Mozilla Firefox pregledač;
• -ms-: Internet pretraživač.

Dakle, ako je ime svojstva prefiksano, to znači da je ovo svojstvo implementirano i da će se koristiti isključivo u navedenom pregledniku. Svi ostali pregledači će ovu značajku zanemariti. za njih je taj prefiks nepoznat.

Razlozi za pojavu prefiksa?

Razloga za pojavu prefiksa bilo je puno:

• Za uključivanje u preglednik eksperimentalnih CSS svojstava koja standard još nije odobrila. Stoga proizvođači pregledača testiraju i daju prijedloge prije nego što odobre CSS svojstva u standardu.
• Da biste rešili probleme sa pretraživačima.
• Za kreiranje vlastitih svojstava koja nisu dio CSS standarda, ali mogu se u njima pojaviti nakon nekog vremena.

Kad se eksperimentalno svojstvo odobri u standardu i prođe testiranje u pregledniku, prefiks se obično uklanja s njega.

Kako se koriste prefiksi?

Razmotrite sljedeći kod kao primjer:

   * (-webkit-box-dimenzioniranje: border-box; -moz-veličina kutije: border-box; veličina kutije: border-box;)

Ovaj kôd koristi svojstva CSS koja mijenjaju algoritam za izračunavanje širine i visine za sve elemente web stranice. Prvo CSS svojstvo -webkit-box-dimenzioniranje sa vrijednošću border-box-a namijenjeno je pregledačima koji koriste webkit (Safari) ili trepćući motor (Chrome, Opera, Yandex.Browser). Drugo CSS svojstvo -moz-box-dimenzioniranje sa vrijednošću border-box-a namijenjeno je pregledačima koji koriste Gecko motor (Mozilla Firefox). Posljednje svojstvo CSS namijenjeno je pregledačima u kojima je ovo svojstvo već testirano i implementirano u skladu sa standardom.

Kada koristite prefikse za svojstva CSS-a, imajte na umu da ih treba staviti ispred svojstva CSS bez prefiksa. Zašto je to tako važno? Ovo je važno jer ako se jednom jednom izvornom svojstvu (bez prefiksa) implementira u preglednik, tada će se koristiti (jer je posljednja), a ne njena eksperimentalna verzija.

Na primjer: primjena CSS svojstva na sve elemente web stranice u verziji 40 Google Chrome.

Na gornjoj slici je prikazano da je izvorni entitet veličine veličine okvira već ugrađen u ovaj preglednik, a zbog činjenice da je posljednji, preglednik ga koristi umjesto gore navedenog svojstva -webkit-box-veličine.

Kako provjeriti podršku za određeni entitet u pretraživaču?

Web lokacija na kojoj možete provjeriti je li taj entitet implementiran ili ne u određenom pregledniku može biti donja veza. Osim toga, stranica prikazuje postotak korisnika koji koriste ovu verziju pretraživača.

  Web stranica "Mogu li koristiti ..."

Na primjer: provjerite kako se svojstvo transformacije implementira u preglednike.

Na web mjestu CanIUse preglednici su označeni različitim bojama, ovisno o stanju u kojem se nalazi podrška za određena svojstva ili oznake:

• Crveni pravokutnik je preglednik u kojem ovo svojstvo nije implementirano;
• Zeleni pravokutnik s crticom u gornjem desnom kutu je preglednik u kojem se ovo svojstvo koristi putem prefiksa;
• Svijetlo zeleni pravokutnik je preglednik u kojem je svojstvo djelomično implementirano;
• Zeleni pravokutnik je preglednik u kojem je ovo svojstvo implementirano u skladu sa standardom.

Kao što znate, ne svi preglednici tretiraju datoteke CSS stila na isti način. U osnovi, problemi se javljaju sa starim verzijama stvaranja malih razmjera Internet Explorer  (Verzija 7 i stariji). Usput, ako se problem pojavljuje u modernim preglednicima (poput Opera, Mozilla Firefox, Chrome), onda ja toplo preporučujem revidirati izgled stranice.

Dakle, evo. Postoji problem sa pregledačima. A znam barem tri načina da se ovaj problem riješi.

1. metoda. Najtačnija

Stilovi za pretraživače koji ne razumiju pravilno vaš css zapisani su u zasebnoj datoteci. Obično je ovaj pretraživač, kao što rekoh Internet Explorer, a te datoteke se zovu fix-ie.css

... ... ...

Promjena teme imenana pravo ime svoje teme - i kada otvorite Internet Explorer  verzija 7 i novije - ova će se datoteka dodati u opći skup stilskih datoteka, pa čak i keširati ako je omogućeno predmemoriranje.

Ova je linija odgovorna za verziju preglednika s kojom će biti povezan tablica stilova:

где styles.css - файл, который будет отвечать за стили только для IE .

Единственный известный на данный момент способ написать стили только для Google Chrome , используя при этом JavaScript . При этом не нужно знать JS , достаточно взять пример отсюда и адаптировать его под свои нужды.

Суть состоит в том, что мы проверяем, каким браузером пользуется посетитель сайта и если это Google Chrome , то подключаем для него дополнительный файл стилей, в котором нужные свойства, которые могут перекрываться в основном файле стилей, выделяем !important .

раздел, добавляем такие строчки, внутри тега ):

var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) { var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //путь к файлу стилей только для Chrome link.media = "all"; head.appendChild(link); }

Единственный известный на данный момент способ написать стили только для Opera , используя при этом JavaScript . При этом не нужно знать JS , достаточно взять пример отсюда и адаптировать его под свои нужды.

Суть состоит в том, что мы проверяем, каким браузером пользуется посетитель сайта и если это Opera , то подключаем для него дополнительный файл стилей, в котором нужные свойства, которые могут перекрываться в основном файле стилей, выделяем !important .

Синтаксис такой(в файле.php или.html , куда подключаем файл стилей,т.е. в раздел, добавляем такие строчки, внутри тега ):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) { var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //путь к файлу стилей только для Opera link.media = "all"; head.appendChild(link); }

Единственное что вам тут нужно поменять это в 10 строчке путь до вашего файла стилей.

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

6.5K

Кроссбраузерность — это способность сайта корректно отображаться в различных браузерах. Ресурс должен работать одинаково во всех версиях обозревателей.

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

Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.

Современные браузеры полностью поддерживают HTML5 и CSS3 . Но один и тот же код HTML / CSS / JavaScript в старых браузерах интерпретируется по-разному, что приводит к «кроссбраузерной несовместимости » сайта. Особенно это касается старых версий Internet Explorer .

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

1. Текущая ситуация

Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.

Хотя Windows 7 (31,20% ) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.

Взглянув на статистику за 2015 год по используемым браузерам, мы видим, что первое место принадлежит Chrome (все версии — 44,87% ), второе место — Firefox (все версии — 10,37% ), третье Internet Explorer 11 (6,84% ).

Ускоренные темпы выпуска новых версий Google Chrome и Firefox позволяют более эффективно разрабатывать проекты для этих платформ. Немного другая картина складывается для «плохого парня » Internet Explorer , потому что в Сети до сих пор можно найти его старые версии. А это приводит к возникновению проблем с кроссбраузерностью сайта.

Корпорация Microsoft остановила поддержку IE6 8 апреля 2014 года. И с 2016 года будет поддерживаться и получать обновления только самая последняя версия Internet Explorer . Это фактически означает, что в начале 2016 года была полностью прекращена поддержка IE7 и IE8 , независимо от операционной системы. IE9 будет поддерживаться только в Windows Vista , IE10 — только в Windows Server 2012 , IE11 — в Windows 7 и Windows 8.1 :

Как следствие, нужно прекратить разработку под IE6 и, а также под IE7 . Чтобы обосновать эту стратегию, можно привести несколько примеров решений известных компаний: Google прекратила поддержку IE8 в ноябре 2012 года, а IE9 — в октябре 2013 года.

Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .

Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .

Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.

2. Проанализируйте свою аудиторию

Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:

• Какова ваша целевая аудитория?
• На какой географический регион нужно настроить таргетинг?
• Какие браузеры и устройства используют ваши посетители?
• Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
• Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.

3. Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например,

,