- Оригинальный адрес:Using CSS Grid: Supporting Browsers Without Grid
- Оригинальный автор:Rachel Andrew
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:Raoul1996
- Корректор:AceLeeWinnie,su-dan
Резюме
При использовании любой новой функции CSS необходимо решить проблемы совместимости с браузером. Как и в случае с Flexbox и CSS Grid, совместимость важнее повышения производительности при использовании новых функций CSS.
В этой статье я рассмотрюРешение проблем совместимости браузеров сегодняМетоды. Что мы можем сделать, чтобы заставить нас использовать новые функции CSS сейчас и по-прежнему обеспечивать хороший опыт для браузеров, которые не поддерживают новые функции?
Что мы понимаем под поддержкой?
Прежде чем объяснять, как поддерживать браузеры, которые изначально не поддерживают сетки, необходимо понятьслужба поддержкиимея в виду. Для поддержки, возможно, сайт должен выглядеть точно так же в браузерах в списке. Вероятно, это означает, что для всех браузеров вам не нужно делать какие-то последние штрихи. Это, вероятно, означает, что вы очень довольны стабильным опытом, который вы получаете при тестировании этих браузеров.
Связанный с этим вопрос: как вы определяете список поддерживаемых браузеров? **Даже совершенно новый веб-сайт не должен быть высечен на камне. Для большинства современных предприятий когда-либо создавался веб-сайт. У вас могут быть некоторые инструменты аналитики, чтобы узнать, какие браузеры поддерживает ваш веб-сайт, но имейте в виду, что эти инструменты не обнаруживают поддержку мобильных устройств. Если он не работает на маленьком экране, люди не будут заходить на сайт со своих телефонов!
Если у вас нет инструментов анализа, вы можетеCan I UseИмпортируйте данные для вашего местоположения выше.
существуетCan I UseНа этом веб-сайте вы можете импортировать данные об использовании для вашего местоположения. (Предварительный просмотр большой картины)
Здесь также стоит помнить о целях веб-сайта. Например, веб-сайты, стремящиеся привлечь посетителей, живущих на развивающихся рынках, таких как Индия, должны убедиться, что они правильно работают в браузерах, используемых пользователями в этих странах.
Мне просто нужно беспокоиться о старых браузерах?
На момент написания этой статьи Edge, Chrome, Firefox, Opera, Safari, iOS Safari поддерживают макеты сетки.
Поддержка IE10 и IE11 с-ms
Исходная спецификация префикса. для того, что вы используетеСтарыйДля браузеров:
- Internet Explorer 9 (IE 11 и ниже, если только учитывать новую спецификацию)
- Край 15 и ниже
- Версии до Firefox 52
- Safari и iOS Safari до версии 10.1
- Версии до Chrome 57
- До Samsung Internet 6.2
Однако, как обсуждалось в предыдущем разделе, эти популярные настольные и мобильные браузеры уже более широко используются на развивающихся рынках.Эти браузеры еще не поддерживают макет сетки. Например, с глобальной точки зрения на браузер UC приходится 8,1% трафика, что делает его третьим по популярности браузером в мире. Но если вам посчастливилось жить в США или Европе, скорее всего, вы никогда о нем не слышали.
(Источник изображения) (Предварительный просмотр большого изображения)
UC Browser не поддерживает сетку. Он оптимизирован не только для маломощных устройств, но и для пользователей в регионах, где плата за передачу данных высока. Это важное соображение, когда мы начинаем планировать нашу поддержку.
Существует ли Polyfill (прокладка) для CSS Grid?
При первом появлении CSS сетки в первый раз, очевидный вопрос: «Могу ли я использовать многолифилл?» К сожалению, даже с такими хорошими вещами, волшебный полифилл для всего макета вряд ли произойдет, также не очень хорошая идея.
При старом способе компоновки сетки вряд ли могут это сделать. Таким образом, чтобы воспроизвести макет сетки в неподдерживаемых браузерах, необходимо проделать большую работу в JavaScript. Даже на компьютерах с хорошими ресурсами, с быстрым движком рендеринга, вычисление высоты и позиционирования элементов может быть немного неприятно. Мы уже знаем,Браузеры, не поддерживающие сеткинаиболее распространен на маломощных устройствах на развивающихся рынкахстаршая, или более медленные браузеры. Зачем помещать кучу JavaScript на эти устройства?
Не ищите полифилл, а подумайте, как использовать макет сетки, чтобы обеспечить лучший опыт для тех браузеров, которые его не поддерживают. В поддерживаемых браузерах с помощью сеток можно создавать сложные макеты с минимальным использованием CSS, при этом предоставляя хороший опыт тем, кто этого не делает. Это будет немного больше работы, чем просто добавление полифилла к проблеме, но делая это, вы можете гарантировать хороший опыт, вместо этого сделать так, чтобы сайт везде выглядел одинаково, это не самая важная цель.
Сценарий понижения компоновки сетки
Итак, как мы предоставляем индивидуальную поддержку для используемого устройства и браузера? Как оказалось, у CSS есть ответ, который вы ищете.
Браузеры игнорируют CSS, который они не понимают
Первая часть картины — браузеры пропускают CSS, который они не понимают. Если браузер не поддерживает макет CSS Grid,grid-template-columns
атрибут, он не знает, что это такое, поэтому он пропускает эту строку и продолжает анализировать следующее содержимое.
Это означает, что вам нужно использовать какой-то старый CSS, как вы привыкли, используяfloat
илиdisplay: table-cell
Реализуйте макеты в стиле сетки в старых браузерах. Браузеры, которые не поддерживают макет сетки, будут использовать этот макет и игнорировать все объявления сетки. Браузеры, поддерживающие макет сетки, будут продолжать искать директивы сетки и применять их. На этом этапе нам нужно рассмотреть, что произойдет, если элемент, использующий другой метод компоновки, станет элементом сетки.
Новый макет совместим со старым макетом
Спецификация определяет, как будет обрабатываться сетка, если на вашей странице есть элементы, расположенные с использованием других методов макета.
Элементы, которые используют атрибуты float или clear, а затем применяют сетку к элементу сетки, больше не будут вести себя так, как если бы они были плавающими или очищенными, как если бы они никогда не использовались. Приложение удалено в следующем CodePen.grid
Все свойства класса, вы можете видеть, как плавают все наши элементы и как очищается третий элемент для плавания. Но в макете сетки это игнорируется.
См. Рэйчеландрю (@rachelandrew) существуетCodePenНаписано этой ручкойПереопределить float и очистить с помощью display: grid.
inline-block
То же самое справедливо.inline-block
Можно установить для детей, но пока применяется родительское окноdisplay: grid
, то встроенный блок будет недействительным.
Я часто использую CSSdisplay: table-cell
для создания макета столбца и выравнивания элементов в браузерах, не поддерживающих сетку, потому что этоvertical-align
свойства могут вступить в силу.
Если вы не знали раньше, прочтитеАнтигерой CSS-макетов — «display:table». Я не рекомендую вам использовать это в качестве основного макета прямо сейчас, но это может быть очень полезным запасным вариантом.
когда вы используетеdisplay: table-cell
Создайте столбцы, CSS создаст то, что называетсяанонимный ящик. Это недостающие части таблицы — ячейки в реальной HTML-таблице были бы вtable
внутри элементаtr
внутри элемента. Анонимные блоки в основном разрешают эти отсутствующие родительские элементы. если вашtable-cell
Элемент становится элементом сетки. Тогда отображение таблицы для этого элемента также не удастся, как ни в чем не бывало.
vertical-align
Свойства по-прежнему не работают в макетах сетки. Итак, если вы можете использовать макет таблицы CSS илиinline-block
, вы можете спокойно игнорировать это свойство и использовать выравнивание сетки сетки. Вы можете увидеть наложение с помощью CSS Grid в следующем CodePen.display:table-cell
а такжеvertical-align
Макет.
См. Рэйчеландрю (@rachelandrew) существуетCodePenНаписано этой ручкойотображение: сетка переопределяет отображение: ячейка таблицы и выравнивание по вертикали.
Вы также можете использовать Flexbox в качестве запасного варианта, как только вы используетеflex
атрибут или независимыйflex-grow
,flex-shrink
илиflex-basis
Атрибутированные элементы, использующие макет сетки, они (гибкие и т. д.) также не будут работать.
Наконец, не забывайте, что макеты с несколькими столбцами в некоторых случаях могут быть запасным вариантом. При размещении карты или изображения каждый элемент будет отображаться в столбцах, а не в строках. Но в некоторых случаях это может быть полезно. Применить к контейнеруcolumn-count
илиcolumn-width
Сделайте его контейнером с несколькими столбцами. затем применитьdisplay:grid
будет игнорироватьcolumn-*
поведение.
Запрос функции
Большинство других макетов предназначены для одного элемента, а не для его контейнера. Например, в плавающем макете у нас есть набор элементов с заданной шириной в процентах, и мы устанавливаем их плавающими влево (плавать: влево). Это заставит их выстроиться вместе. Пока общая сумма не превышает 100% ширины родительского контейнера, мы можем добиться эффекта сетки.
.grid > * {
float: left;
width: 33%;
}
Плавающие элементы заданной ширины создают ощущение сетки. (Предварительный просмотр большого изображения)
Если мы изменим макет на макет CSS Grid, создадим сетку на родительском элементе. Все, что нам нужно сделать, это указать, сколько столбцов могут занимать эти элементы.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 100px;
grid-gap: 20px;
}
В нашем предыдущем макете мы задавали плавающим элементам размер. В новом макете эти элементы становятся элементами сетки, и обычно мы не задаем этим элементам размер, потому что его можно определить по дорожке сетки поперек.
Здесь мы можем толькоспособ переопределить один макет другимрешить проблему. В примере с плавающим макетом, как только элемент с указанным процентным размером становится элементом сетки, размер становится процентом от области сетки, в которой он размещен, а не процентом от всего контейнера. Вы можете использовать Инспектор сетки Firefox, чтобы выделить эти строки — эти элементы теперь сжаты сбоку от ячеек сетки.
В макете сетки ширина будет выражаться в процентах от площади сетки. (Предварительный просмотр большого изображения)
Здесь могут вступить в игру функциональные запросы. Запросы функций аналогичны медиазапросам, вместо проверки ширины и ориентации устройства они проверяют, поддерживает ли браузер функции CSS.
В примере с плавающим макетом, который мы хотим превратить в макет сетки, нам просто нужно переопределить одну вещь внутри запроса функции — мы хотим сбросить ширину до автоматического.
Проверить@rachelandrewсуществуетCodePenНаписал эту ручку:display: демонстрация функционального запроса.
Сколько вам нужно переписать CSS для неподдерживаемых браузеров, зависит от того, сколько разных макетов вы хотите создать для этих старых браузеров.
Макет сетки для IE10 и 11
Хотя браузер Edge был обновлен для поддержки современных макетов сетки, IE10 и IE11 поддерживают только добавление-ms
Написание префикса. Спецификация сетки в том виде, в каком мы ее знаем сегодня, изначально была разработана Microsoft. Мы недовольны этой старой реализацией. Мы должны быть рады, что они начали процесс, предоставив нам сначала сетку. Вы можете узнать больше из этой статьи:История CSS Grid от ее создателей.
Как упоминалось выше, вы можете решить предоставить резервные методы, основанные на плавающих или других типах макета для IE10 и 11. Эта функция также работает нормально, точно так же, как запросы функций не поддерживаются в IE10 и 11. Просто используйте эти функции, чтобы переопределить старый метод, чтобы проверить его поддержку, а затем создайте версию, которая поддерживает браузер, IE10 и 11 будут использовать старый метод.
вы все еще можете использовать-ms-grid
версию для создания резервного метода. Однако эта версия с префиксом отличается от современной сетки, это первая версия, а также экспериментальная версия. С тех пор, как он использовался около пяти лет, многое изменилось. Это означает, что вы не можете просто использовать autoprefixer для добавления префиксов, такой подход может сделать работу пользователей IE10 и 11 хуже, чем если бы вы ничего не делали. Вместо этого вам нужно создать макет, используя эту другую, более продвинутую спецификацию.
Следует отметить следующие моменты:
- Без автоматического размещения вам пришлось бы использовать позиционирование на основе строк для размещения каждого элемента в сетке.
-
grid-template-areas
методы ascii-art не являются частью реализации. - Не задавать свойства зазоров сетки
- Вместо того, чтобы указывать начальную и конечную строки, вы можете указать начальную строку и количество столбцов, которые нужно охватить.
Вы можете найти полную разбивку всех этих свойств в моем блоге,Должен ли я попробовать реализацию Grid Layout в IE?
Если у вас есть большое количество пользователей, использующих эти браузеры, вам может пригодиться эта старая спецификация. Даже если вы используете его только для решения нескольких небольших проблем, это того стоит.
Зачем мне использовать сетки, если эти браузеры должны поддерживаться?
Если в вашем списке есть неподдерживаемые браузеры, то выдолженПредоставьте им те же возможности, что и те браузеры, которые уже поддерживаются. Затем мы задаемся вопросом, должны ли мы использовать макет сетки или любую новую функцию CSS. Используйте допустимое решение, это решение является наиболее совершенным.
Вы также можете подумать, является ли макет сетки хорошим запасным вариантом, и если вы это сделаете, есть вероятность, что вы выбросите кучу несовместимых браузеров из списка «должны быть одинаковыми» в краткосрочной перспективе. Особенно, если вы знаете, что разработка, которую вы делаете сейчас, будет иметь длительный цикл обслуживания. Затем, позднее, вы можете просто использовать сеточную версию и отказаться от резервной схемы.
Тем не менее, поддержка означает для вас, что вы можете потерять совместимость с некоторыми браузерами в обмен на некоторое упрощение разработки.Однако в настоящее время макет сетки по-прежнему необходим, поэтому это использование макета сетки и ориентация на несовместимые браузеры. один опыт компоновки сетки.
Тестирование обратной совместимости
Тестирование на обратную совместимость — последний шаг. Единственный способ проверить, работает ли ваша резервная схема, — это посетить свой сайт в браузере, который не поддерживает сетки CSS. использоватьЗагрузите виртуальную машину, предоставленную Microsoft.Таким образом, вам не придется покупать еще один компьютер. Затем вы можете проверить с помощью Internet Explorer, который не поддерживает разметку сетки.
Вы можете загрузить UC Browser на свой телефон илиИспользуйте десктопную версиюWindows или виртуальная машина.
Существуют также инструменты удаленных виртуальных машин, которые, например, могут получать доступ к браузерам на протяжении всего времени выполнения.BrowserStack. Эти сервисы не бесплатны, но они значительно экономят время при настройке тестовых виртуальных машин.
BrowserStack имеет доступ ко многим различным браузерам и операционным системам. (Предварительный просмотр большого изображения)
Я видел, как кто-то предлагал переключить значения запроса функции, чтобы протестировать что-то, чего не существует. такие как тестированиеdisplay: gridx
. Это прекрасно работает, но вам нужно поместить весь код сетки в блок кода запроса функции вместо того, чтобы игнорировать тот факт, что браузеры будут пропускать неподдерживаемый код CSS. Если вы не знаете, что какой-то код сетки может оказаться за пределами запроса функции, вы можете легко получить ложно правильный результат. Даже если вы используете этот метод для быстрой проверки, я все же настоятельно рекомендую провести некоторые тесты в реальных условиях.
дальнейшее чтение
Я перечислил URL-адреса, упомянутые в этой статье, и есть некоторые дополнительные ресурсы, которые помогут вам поддерживать браузеры по-своему, но при этом использовать преимущества новых макетов. Если вы столкнетесь с какими-либо хорошими ресурсами или особенно сложными вопросами, вы можете добавить их в этот вопрос. Сеточная компоновка является новой для всех нас, и мы можем использовать ее в производстве, но неизбежно будут некоторые вопросы без ответов, давайте посмотрим.
- "Создатели рассказывают историю CSS Grid», Аарон Густафсон, A List Apart
- "Тестирование виртуальных машин для Internet Explorer и Edge, "Майкрософт
- "BrowserStack," Инструмент кроссбраузерного тестирования
- "Должен ли я попытаться реализовать макет сетки с помощью IE?"Рэйчел Эндрю
- Антигерой CSS-макетов — «display:table», Colin Toh
- "CSS Grid Fallback и альтернативная памятка"Рэйчел Эндрю
- "Использование функциональных запросов в CSS," Джен Симмонс, Mozilla Hacks
- "Видеоруководство по запросам функций, " Рэйчел Эндрю
- "CSS Grid и прогрессивное улучшение, веб-документы MDN, Mozilla
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.