تعریف یک مرورگر css قدیمی. CSS - پیشوندهای مرورگر

در این مقاله خواهیم دید که پیشوندهای مرورگر چیست ، دلایل ظهور آنها و نحوه استفاده از آنها در CSS.

پیشوند چیست؟

یک توسعه دهنده وب که شروع به یادگیری اصول نظری CSS و استفاده از این دانش می کند ممکن است هنگام مشاهده نمونه های دنیای واقعی دچار مشکل شود. این ممکن است باعث عدم درک او از آنچه اتفاق می افتد باشد و تمایل بیشتر به مطالعه این فناوری را سلب کند.

به عنوان مثال ، هنگام در نظر گرفتن سبک های یک وب سایت ، یک توسعه دهنده وب ممکن است با ویژگی هایی مواجه شود که حاوی برخی از کلمات مبهم در جلو است: -webkit- ، -moz- ، -ms- و غیره.

   * (-ووبکیت-جعبه-اندازه: جعبه مرزی ؛ -موز-جعبه اندازه: جعبه مرزی ؛ اندازه-جعبه: جعبه مرزی ؛)

این چیست؟ در حقیقت ، همه چیز ساده است ، این کلمات مبهم پیشوند مرورگرهای زیر هستند:

• -webkit-: مرورگرهای Chrome ، Safari ، Opera؛
• -moz-: مرورگر Mozilla Firefox؛
• -ms-: مرورگر اینترنت اکسپلورر.

بنابراین ، اگر نام ویژگی پیشوند است ، این بدان معنی است که این خاصیت پیاده سازی شده است و منحصراً در مرورگر مشخص شده استفاده می شود. همه مرورگرهای دیگر این ویژگی را نادیده می گیرند. برای آنها ، این پیشوند ناشناخته است.

دلایل ظهور پیشوندها؟

دلایل زیادی برای ظهور پیشوندها وجود داشت:

• برای گنجاندن در مرورگر خصوصیات آزمایشی CSS که هنوز توسط استاندارد تأیید نشده اند. بنابراین ، سازندگان مرورگر قبل از تصویب خواص CSS در استاندارد ، آزمایش و پیشنهادهایی را ارائه می دهند.
• برای حل مشکلات مرورگر.
• برای ایجاد خصوصیات خود که جزئی از استاندارد CSS نیستید ، اما ممکن است بعد از مدتی در آن ظاهر شوید.

وقتی یک ویژگی آزمایشی در استاندارد تأیید شده و در مرورگر آزمایش شده باشد ، پیشوند معمولاً از آن خارج می شود.

چگونه از پیشوند استفاده کنیم؟

کد زیر را به عنوان نمونه در نظر بگیرید:

   * (-ووبکیت-جعبه-اندازه: جعبه مرزی ؛ -موز-جعبه اندازه: جعبه مرزی ؛ اندازه-جعبه: جعبه مرزی ؛)

در این کد از خصوصیات CSS استفاده شده است که الگوریتم محاسبه عرض و ارتفاع برای همه عناصر یک صفحه وب را تغییر می دهد. اولین ویژگی CSS-wbkit-box-size با مقدار کادر-جعبه در نظر گرفته شده است برای مرورگرانی که از webkit (Safari) یا موتور چشمک (Chrome، Opera، Yandex.Browser) استفاده می کنند. دومین ویژگی CSS –moz-box-size با مقدار کادر-جعبه برای مرورگرهایی که از موتور Gecko استفاده می کنند (Mozilla Firefox) در نظر گرفته شده است. آخرین ویژگی CSS برای مرورگرهایی در نظر گرفته شده است که در آن قبلاً این خاصیت مطابق با استاندارد آزمایش و اجرا شده است.

هنگام استفاده از پیشوندها برای خصوصیات CSS ، به یاد داشته باشید که آنها باید قبل از خاصیت CSS بدون پیشوند قرار گیرند. چرا اینقدر مهم است؟ این مهم است زیرا اگر به محض پیاده سازی ویژگی اصلی (بدون پیشوند) در مرورگر ، از آن استفاده شود (چون آخرین مورد است) و نه نسخه آزمایشی آن.

به عنوان مثال: اعمال یک ویژگی CSS برای همه عناصر یک صفحه وب در نسخه 40 Google Chrome.

شکل بالا نشان می دهد که ویژگی اصلی جعبه اندازه در حال حاضر در این مرورگر جاسازی شده است و به دلیل آخرین نسخه ، مرورگر به جای خاصیت فوق اندازه -webkit-box از آن استفاده می کند.

چگونه می توان پشتیبانی از یک ویژگی خاص را در یک مرورگر بررسی کرد؟

سایتی که در آن می توانید بررسی کنید که آیا این ویژگی در یک مرورگر خاص پیاده سازی شده است یا خیر ، می تواند لینک زیر باشد. علاوه بر این ، سایت درصد کاربرانی را که از این نسخه مرورگر استفاده می کنند نشان می دهد.

  وب سایت "آیا می توانم استفاده کنم ..."

به عنوان مثال: نحوه اجرای خاصیت تبدیل در مرورگرها را بررسی کنید.

در وب سایت CanIUse ، بسته به وضعیتی که در آن ویژگی ها یا برچسب های خاصی در آن قرار دارد ، مرورگرها به رنگ های مختلفی علامت گذاری می شوند:

• مستطیل قرمز مرورگری است که در آن این ویژگی اجرا نشده است.
• مستطیل سبز با ضریح در گوشه فوقانی سمت راست مرورگری است که از این ویژگی از طریق پیشوند استفاده می شود.
• مستطیل سبز روشن مرورگری است که در آن بخشی از این ویژگی انجام می شود.
• مستطیل سبز مرورگری است که در آن این ویژگی مطابق استاندارد اجرا می شود.

همانطور که می دانید ، همه مرورگرها با پرونده های سبک css به یک شکل رفتار نمی کنند. اصولاً با نسخه های قدیمی ایجاد مقیاس کوچک مشکلاتی بوجود می آید اینترنت اکسپلورر   (نسخه 7 و زیر). به هر حال ، اگر این مشکل در مرورگرهای مدرن (مانند اپرا ، موزیلا فایرفاکس ، کروم) رخ دهد ، آنگاه من بسیار توصیه می کنم طرح صفحه را بازبینی کنید

بنابراین در اینجا مشکلی در مرورگرها وجود دارد. و من حداقل سه راه برای حل این مشکل می دانم.

روش اول صحیح ترین

سبک هایی برای مرورگرهایی که 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 (например,

,