ძველი css ბრაუზერის განსაზღვრა. CSS - ბრაუზერის პრეფიქსი

ამ სტატიაში ჩვენ გადავხედავთ, რა არის ბრაუზერის წინასიტენი, მათი გარეგნობის მიზეზები და როგორ გამოვიყენოთ ისინი CSS- ში.

რა არის პრეფიქსი?

ვებ დეველოპერი CSS– ის თეორიული საფუძვლების შესწავლას და ამ ცოდნის პრაქტიკაში გამოყენებას, შესაძლოა რეალური პრობლემები შეექმნას რეალურ სამყაროში მოცემული მაგალითები. ამან შეიძლება გამოიწვიოს მას იმის ცოდნა, რაც ხდება და ამ ტექნოლოგიის შემდგომი შესწავლის სურვილს შეაფერხებს.

მაგალითად, ვებსაიტის სტილის განხილვისას, ვებგვერდზე შემქმნელმა შეიძლება წააწყდეს თვისებებს, რომლებიც შეიცავს წინ რაიმე ბუნდოვან სიტყვას: -webkit-, -moz-, -ms- და ა.შ.

   * (-ბოკიტ-ყუთის ზომის: სასაზღვრო ყუთი; -მოზ-ყუთის ზომის: სასაზღვრო ყუთი; ყუთის ზომის: სასაზღვრო ყუთი;)

რა არის ეს? სინამდვილეში, ყველაფერი მარტივია, ეს ბუნდოვანი სიტყვები შემდეგი ბრაუზერების პრეფიქსია:

• -webkit-: ბრაუზერები Chrome, Safari, Opera;
• -moz-: Mozilla Firefox ბრაუზერი;
• -ms-: Internet Explorer ბრაუზერი.

ამრიგად, თუ ქონების სახელწოდება არის პრეფიქსი, ეს ნიშნავს, რომ ეს ქონება ხორციელდება და გამოყენებული იქნება ექსკლუზიურად ბრაუზერში. ყველა სხვა ბრაუზერი უგულებელყოფს ამ ქონებას. მათთვის, ეს პრეფიქსი უცნობია.

პრეფიქსიების გამოჩენის მიზეზები?

უამრავი პრეფიქსების გამოჩენის უამრავი მიზეზი არსებობდა:

• ექსპერიმენტული CSS თვისებების ბრაუზერში ჩართვისთვის, რომლებიც ჯერ არ არის დამტკიცებული სტანდარტით. ამრიგად, ბრაუზერის შემქმნელები შეამოწმონ და გააკეთონ წინადადებები სტანდარტში CSS თვისებების დამტკიცებამდე.
• ჯვარედინი ბრაუზერის პრობლემების გადასაჭრელად.
• საკუთარი თვისებების შესაქმნელად, რომლებიც არ არის CSS სტანდარტის ნაწილი, მაგრამ შეიძლება მასში გარკვეული დროის შემდეგ გამოჩნდეს.

როდესაც ექსპერიმენტული თვისება დამტკიცებულია სტანდარტში და ბრაუზერში ჩაბმული ტესტირება, პრეფიქსი ჩვეულებრივ ამოღებულია მისგან.

როგორ გამოვიყენოთ პრეფიქსიები?

განვიხილოთ შემდეგი კოდი, როგორც მაგალითი:

   * (-ბოკიტ-ყუთის ზომის: სასაზღვრო ყუთი; -მოზ-ყუთის ზომის: სასაზღვრო ყუთი; ყუთის ზომის: სასაზღვრო ყუთი;)

ეს კოდი იყენებს CSS თვისებებს, რომლებიც ცვლის ალგორითმს ვებსაიტის ყველა ელემენტის სიგანისა და სიმაღლის გამოსათვლელად. პირველი CSS თვისება - wkkit-box- ის სასაზღვრო ყუთის მნიშვნელობის მქონე ბრაუზერები განკუთვნილია ბრაუზერებისთვის, რომლებიც იყენებენ ვებკიტს (Safari) ან მოციმციმე ძრავას (Chrome, Opera, Yandex.Browser). მეორე CSS საკუთრება - მოზ-ყუთი ზომის, რომელსაც აქვს სასაზღვრო ყუთის მნიშვნელობა, განკუთვნილია ბრაუზერებისთვის, რომლებიც იყენებენ Gecko ძრავას (Mozilla Firefox). ბოლო CSS ქონება განკუთვნილია ბრაუზერებისთვის, რომლებშიც ეს ქონება უკვე გამოცდილია და განხორციელებულია სტანდარტის შესაბამისად.

CSS თვისებებისათვის წინასიტყვისების გამოყენებისას გახსოვდეთ, რომ ისინი უნდა განთავსდეს CSS თვის წინამდგომოდ, პრეფიქსი გარეშე. რატომ არის ეს ასე მნიშვნელოვანი? ეს მნიშვნელოვანია იმის გამო, რომ თუ ბრაუზერში ერთხელ დაინერგა ორიგინალური თვისება (პრეფიქსი გარეშე), მაშინ ის გამოიყენებს (რადგან ის ბოლოა), და არა მისი ექსპერიმენტული ვერსია.

მაგალითად: CSS ქონების ვებგვერდის ყველა ელემენტის გამოყენება Google Chrome- ის 40 ვერსიაში.

ზემოთ მოყვანილი ფიგურა გვიჩვენებს, რომ ყუთის ზომის ორიგინალი ქონება უკვე ჩაშენებულია ამ ბრაუზერში და იმის გამო, რომ იგი ბოლოა, ბრაუზერი იყენებს მას ზემოთ მოყვანილი wbkit-box ზომის საკუთრების ნაცვლად.

როგორ შეამოწმოთ ბრაუზერში კონკრეტული ქონების მხარდაჭერა?

საიტი, რომელზეც შეგიძლიათ შეამოწმოთ, განხორციელებულია თუ არა ეს თვისება კონკრეტულ ბრაუზერში, შეიძლება იყოს ქვემოთ მოცემული ბმული. გარდა ამისა, საიტი აჩვენებს მომხმარებელთა პროცენტულ რაოდენობას, რომლებიც იყენებენ ბრაუზერის ამ ვერსიას.

  ვებსაიტზე "შემიძლია გამოვიყენო ..."

მაგალითად: შეამოწმეთ, თუ როგორ ხორციელდება ტრანსფორმაციის თვისება ბრაუზერებში.

CanIUse ვებსაიტზე, ბრაუზერები აღინიშნება სხვადასხვა ფერში, ეს დამოკიდებულია სახელმწიფოზე, რომელშიც გარკვეული თვისებების ან ტეგების მხარდაჭერა მდებარეობს:

• წითელი ოთხკუთხედი არის ბრაუზერი, რომელშიც ეს ქონება არ ხორციელდება;
• ზედა მართკუთხედის ზედა ნაწლავში ჩასმული მწვანე ოთხკუთხედი არის ბრაუზერი, რომელშიც ამ თვისებას იყენებენ პრეფიქსი საშუალებით;
• ღია მწვანე ოთხკუთხედი არის ბრაუზერი, რომელშიც ეს თვისება ნაწილობრივ ხორციელდება;
• მწვანე ოთხკუთხედი არის ბრაუზერი, რომელშიც ეს ქონება ხორციელდება სტანდარტის შესაბამისად.

მოგეხსენებათ, ყველა ბრაუზერი არ ცვლის css სტილის ფაილებს იგივე გზით. ძირითადად, პრობლემები წარმოიქმნება მცირე მასშტაბის შექმნის ძველ ვერსიებთან ინტერნეტის გამომძიებელი  (ვერსია 7 და ქვემოთ). სხვათა შორის, თუ პრობლემა გვხვდება თანამედროვე ბრაუზერებში (მაგალითად, Opera, Mozilla Firefox, Chrome), მაშინ მე გირჩევთ გადახედეთ გვერდის განლაგებას.

ასე რომ აქ. ბრაუზერების პრობლემაა. მე ვიცი მინიმუმ სამი გზა ამ პრობლემის გადასაჭრელად.

1 მეთოდი. ყველაზე სწორი

სტილები ბრაუზერებისთვის, რომლებიც არ ესმით თქვენი css, იწერება ცალკეულ ფაილში. ჩვეულებრივ, ეს ბრაუზერი, როგორც ვთქვი, არის ინტერნეტის გამომძიებელი, და ამ ფაილებს უწოდებენ fix-ie.css

... ... ...

შეცვლა სახელების თემებითქვენი თემის ნამდვილი სახელით - და როდესაც გახსნით ინტერნეტის გამომძიებელი  ვერსია 7 და ქვემოთ - ამ ფაილს დაემატება სტილის ფაილების ზოგადი ნაკრები, ხოლო ქეშირებაც კი ინახება, თუ ქეშირება ჩართულია.

ეს სტრიქონი პასუხისმგებელია ბრაუზერის იმ ვერსიაზე, რომელსაც უკავშირდება სტილის ფურცელი:

где 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 (например,

,