Как разумно ответить на вопросы о совместимости браузера

внешний интерфейс JavaScript браузер CSS
Как разумно ответить на вопросы о совместимости браузера

предисловие

Студентам, имевшим опыт собеседований, следовало задавать вопросы о совместимости браузеров, поскольку интервьюеры часто застают их врасплох, потому что они обычно спрашивают именно так. «Давайте поговорим о совместимости браузеров», «Вы когда-нибудь узнавали о совместимости браузеров?» Итак, как нам правильно ответить на этот вопрос?

Хотя вопросы интервьюера очень общие, совместимость браузера — это не что иное, как совместимость стилей (css), совместимость взаимодействия (javascript) и хаки браузера.

Аспекты совместимости стилей (css)

  1. По историческим причинам существуют различия в стилях разных браузеров.Вы можете использовать Normalize.css, чтобы сгладить различия, или вы можете настроить свой собственный файл reset.css, например стили глобального сброса с помощью селекторов с подстановочными знаками.

     * { margin: 0; padding: 0; }

  2. Поставщики браузеров начали поддерживать использование этих свойств еще до того, как CSS3 стал настоящим стандартом. Когда синтаксис стиля CSS3 все еще колеблется, производители браузеров предоставляют префиксы для конкретных браузеров.До сих пор некоторые свойства по-прежнему должны иметь префикс браузеров. В процессе разработки мы обычно используем подключаемые модули разработки IDE, препроцессоры css и проекты автоматизированного построения интерфейса, которые помогают нам справиться с ними.

    Соответствие между ядром браузера и префиксом следующее

    ядро Основной представитель браузера префикс
    Trident Интернет-проводник -ms
    Gecko Firefox -moz
    Presto Opera -o
    Webkit Хром и Сафари -webkit

  3. При восстановлении черновика дизайна нам часто приходится использовать атрибут прозрачности, поэтому браузер ниже IE9 не может использовать opacit.

     opacity: 0.5;
 filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
 filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

Совместимость взаимодействия (javascript)

  1. Для проблем с совместимостью событий обычно требуется инкапсулировать метод адаптера для фильтрации связывания и удаления дескрипторов событий, блокирования всплывающих сообщений и обработки поведения событий по умолчанию.

     var  helper = {}

 //绑定事件
 helper.on = function(target, type, handler) {
 	if(target.addEventListener) {
 		target.addEventListener(type, handler, false);
 	} else {
 		target.attachEvent("on" + type,
 			function(event) {
 				return handler.call(target, event);
 		    }, false);
 	}
 };

 //取消事件监听
 helper.remove = function(target, type, handler) {
 	if(target.removeEventListener) {
 		target.removeEventListener(type, handler);
 	} else {
 		target.detachEvent("on" + type,
 	    function(event) {
 			return handler.call(target, event);
 		}, true);
     }
 };

  2. Используется новый конструктор Date(). '2018-07-05' не может использоваться различными браузерами для правильного создания объектов даты с использованием new Date(str). Правильное использование: «2018/07/05».

  3. Получить scrollTop через document.documentElement.scrollTop Совместимость с браузерами, отличными от Chrome

     var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

взлом браузера

  1. Быстро определить версию браузера IE

     <!--[if IE 8]> ie8 <![endif]-->
 
 <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

  2. Определите, является ли это браузером Safari

     /* Safari */
 var isSafari = /a/.__proto__=='//';

  3. Определите, является ли это браузером Chrome

     /* Chrome */
 var isChrome = Boolean(window.chrome);

Вы не можете потерять свою фигуру, мы фронтенд с сильным стилем

«Что? Ваша компания должна быть совместима с IE6. Давайте остановимся на сегодняшнем интервью, прощайте».

Расширенное чтение

Как обрабатывать префиксы свойств CSS3 _Autoprefixer

Наиболее точное использование непрозрачности прозрачности CSS и версий фильтров прозрачности IE.

Прошлые статьи

Интенсивное чтение «JavaScript, которого вы не знаете (Том 1)»

Интенсивное чтение тома II "JavaScript, которого вы не знаете"

Интенсивное чтение «Введение в Node.js»

алгоритм сборки мусора javascript

Интенсивное чтение "Иллюстрированного HTTP"

Адрес для скачивания ментальной карты

Категории