Android ระบบปฏิบัติการ มัลติมีเดีย เครือข่ายสังคมออนไลน์ เครื่องมือ ตัวแปลงสัญญาณ กราฟิก
คุณอยู่ที่นี่: » »

              การกำหนดเบราว์เซอร์ css เก่า CSS - คำนำหน้าเบราว์เซอร์

ในบทความนี้เราจะดูว่าคำนำหน้าเบราว์เซอร์คืออะไรสาเหตุของการปรากฏตัวและวิธีใช้ใน CSS

คำนำหน้าคืออะไร?

นักพัฒนาเว็บเริ่มเรียนรู้พื้นฐานทางทฤษฎีของ CSS และการใช้ความรู้นี้ในทางปฏิบัติอาจพบปัญหาเมื่อดูตัวอย่างโลกแห่งความจริง สิ่งนี้อาจทำให้เขาขาดความเข้าใจในสิ่งที่เกิดขึ้นและไม่สนับสนุนความปรารถนาที่จะศึกษาเทคโนโลยีนี้ต่อไป

ตัวอย่างเช่นเมื่อพิจารณาถึงรูปแบบของเว็บไซต์ผู้พัฒนาเว็บอาจพบคุณสมบัติที่มีคำที่ไม่ชัดเจนอยู่ด้านหน้า: -webkit-, -moz-, -ms- ฯลฯ

   * (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)

นี่อะไรน่ะ? อันที่จริงทุกอย่างง่ายคำที่ไม่ชัดเจนเหล่านี้เป็นส่วนนำหน้าของเบราว์เซอร์ต่อไปนี้:

  • -webkit-: เบราว์เซอร์ Chrome, Safari, Opera;
  • -moz-: เบราว์เซอร์ Mozilla Firefox;
  • -ms-: เบราว์เซอร์ Internet Explorer

ดังนั้นถ้าชื่อของคุณสมบัติถูกนำหน้าหมายความว่าคุณสมบัตินี้จะถูกนำไปใช้และจะถูกใช้เฉพาะในเบราว์เซอร์ที่ระบุ เบราว์เซอร์อื่น ๆ ทั้งหมดจะไม่สนใจคุณสมบัตินี้ สำหรับพวกเขาคำนำหน้านี้ไม่เป็นที่รู้จัก

เหตุผลในการปรากฏตัวของคำนำหน้า?

มีเหตุผลมากมายสำหรับการปรากฏตัวของคำนำหน้า:

  • เพื่อรวมไว้ในเบราว์เซอร์ของคุณสมบัติ CSS แบบทดลองที่ยังไม่ได้รับการอนุมัติตามมาตรฐาน ดังนั้นผู้ผลิตเบราว์เซอร์จะทดสอบและให้คำแนะนำก่อนอนุมัติคุณสมบัติ CSS ในมาตรฐาน
  • เพื่อแก้ปัญหาความเข้ากันได้ข้ามเบราว์เซอร์
  • เพื่อสร้างคุณสมบัติของคุณเองที่ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน CSS แต่อาจปรากฏขึ้นหลังจากนั้นไม่นาน

เมื่อคุณสมบัติทดลองได้รับการอนุมัติในมาตรฐานและผ่านการทดสอบในเบราว์เซอร์คำนำหน้ามักจะถูกลบออกจากมัน

วิธีใช้คำนำหน้า

พิจารณารหัสต่อไปนี้เป็นตัวอย่าง:

   * (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;)

รหัสนี้ใช้คุณสมบัติ CSS ที่เปลี่ยนอัลกอริทึมสำหรับการคำนวณความกว้างและความสูงสำหรับองค์ประกอบทั้งหมดของหน้าเว็บ คุณสมบัติ CSS ตัวแรก - webkit-box-sizing พร้อมค่า border-box นั้นมีไว้สำหรับเบราว์เซอร์ที่ใช้ webkit (Safari) หรือเอ็นจิ้นกะพริบตา (Chrome, Opera, Yandex.Browser) คุณสมบัติ CSS ตัวที่สอง -moz-box-sizing พร้อมค่า border-box นั้นมีไว้สำหรับเบราว์เซอร์ที่ใช้โปรแกรม Gecko (Mozilla Firefox) คุณสมบัติ CSS ล่าสุดมีไว้สำหรับเบราว์เซอร์ที่คุณสมบัตินี้ได้รับการทดสอบและนำไปใช้งานตามมาตรฐาน

เมื่อใช้คำนำหน้าสำหรับคุณสมบัติ CSS โปรดจำไว้ว่าควรใส่คำนำหน้าคุณสมบัติ CSS โดยไม่มีคำนำหน้า ทำไมสิ่งนี้สำคัญมาก สิ่งนี้มีความสำคัญเพราะหากมีการใช้งานคุณสมบัติดั้งเดิม (ไม่มีคำนำหน้า) ในเบราว์เซอร์จะมีการใช้คุณสมบัตินี้ (เนื่องจากเป็นคุณสมบัติล่าสุด) ไม่ใช่เวอร์ชันทดลอง

ตัวอย่างเช่น: การใช้คุณสมบัติ CSS กับองค์ประกอบทั้งหมดของหน้าเว็บใน Google Chrome เวอร์ชัน 40

รูปด้านบนแสดงให้เห็นว่าคุณสมบัติการปรับขนาดกล่องดั้งเดิมถูกฝังอยู่ในเบราว์เซอร์นี้แล้วและเนื่องจากความจริงที่ว่ามันเป็นคุณสมบัติสุดท้ายเบราว์เซอร์จะใช้งานแทนการใช้คุณสมบัติ -webkit-box-sizing ข้างต้น

จะตรวจสอบการรองรับคุณสมบัติเฉพาะในเบราว์เซอร์ได้อย่างไร?

ไซต์ที่คุณสามารถตรวจสอบว่ามีการใช้งานคุณสมบัตินี้หรือไม่ในเบราว์เซอร์ที่เฉพาะเจาะจงสามารถเป็นลิงค์ด้านล่าง นอกจากนี้ไซต์จะแสดงเปอร์เซ็นต์ของผู้ใช้ที่ใช้เบราว์เซอร์เวอร์ชันนี้

  เว็บไซต์ "ฉันสามารถใช้ ... "

ตัวอย่างเช่น: ตรวจสอบว่ามีการใช้คุณสมบัติการแปลงในเบราว์เซอร์อย่างไร

บนเว็บไซต์ CanIUse เบราว์เซอร์จะมีสีต่างกันขึ้นอยู่กับสถานะที่รองรับคุณสมบัติหรือแท็กบางอย่าง:

  • สี่เหลี่ยมสีแดงเป็นเบราว์เซอร์ที่คุณสมบัตินี้ไม่ได้ใช้งาน
  • สี่เหลี่ยมสีเขียวพร้อมยัติภังค์ที่มุมขวาบนคือเบราว์เซอร์ที่ใช้คุณสมบัตินี้ผ่านคำนำหน้า
  • สี่เหลี่ยมสีเขียวอ่อนเป็นเบราว์เซอร์ที่คุณสมบัตินี้ถูกนำไปใช้บางส่วน
  • สี่เหลี่ยมสีเขียวเป็นเบราว์เซอร์ที่คุณสมบัตินี้มีการใช้งานตามมาตรฐาน

อย่างที่คุณทราบเบราว์เซอร์บางตัวนั้นไม่รองรับไฟล์สไตล์ css เหมือนกัน โดยทั่วไปปัญหาเกิดขึ้นกับการสร้างขนาดเล็กรุ่นเก่า Internet explorer  (เวอร์ชั่น 7 ขึ้นไป) โดยวิธีการถ้าปัญหาเกิดขึ้นในเบราว์เซอร์ที่ทันสมัย \u200b\u200b(เช่น Opera, Mozilla Firefox, Chrome) แล้วฉัน ขอแนะนำอย่างยิ่ง แก้ไขเค้าโครงหน้ากระดาษ

ดังนั้นที่นี่ มีปัญหากับเบราว์เซอร์ และฉันรู้วิธีแก้ปัญหานี้อย่างน้อยสามวิธี

วิธีที่ 1 ถูกต้องที่สุด

สไตล์สำหรับเบราว์เซอร์ที่ไม่ถูกต้องเข้าใจ css ของคุณเขียนในไฟล์แยกต่างหาก โดยทั่วไปแล้วเบราว์เซอร์นี้อย่างที่ฉันพูดคือ Internet explorerและไฟล์เหล่านี้เรียกว่า การแก้ไข ie.css

... ... ...

เปลี่ยนแปลง ตั้งชื่อธีมเป็นชื่อจริงของหัวข้อของคุณ - และเมื่อคุณเปิด Internet explorer  เวอร์ชัน 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 (например,

,
       หัวข้อ: อีออส
แบ่งปันสิ่งนี้