Я учусь летать на легких самолетах.
Это отвлекает меня от компьютера.
Недавно у меня возникли проблемы с удержанием Cessna 150 на малой высоте, когда мы приближались к аэропорту Бристоля.
Восходящий поток воздуха буквально затянул меня в облако.
Мой летный инструктор сказал: «Это не твоя вина, это твоя проблема».
Он имел в виду, что я должен сохранять высоту, даже если что-то работает против меня.
Мне нужно было узнать, что такая ситуация случается, и научиться с ней бороться при пилотировании.
После приземления я подумал, что фраза «это не твоя вина, а твоя проблема» прекрасно применима практически к любой ситуации.
В этой статье я освещаю тему поддержки старых браузеров при использовании новых технологий, таких как CSS Grid Layout. Мы, разработчики, часто стесняемся обсуждать поддержку браузеров с клиентами и коллегами, как будто это наша вина, что сайты в IE9 не выглядят точно так же, как в последних версиях Firefox или Chrome. Пришло время признать, что это не наша вина.
Но ответственность за то, чтобы решить эту проблему должным образом и на благо всех, во многом является нашей проблемой.
Сетки абсолютно новые! У них, должно быть, ужасная поддержка браузеров?
CSS Grid Layout работает в Chrome, Firefox, Opera и Safari с марта этого года.Microsoft Edge недавно выпустил предварительную сборку с флагом Grid. На момент публикации статьи Могу ли я использовать показывает, что глобальная поддержка CSS Grid Layout составляет 65,64% или 70,75%, если вы добавите префиксную версию из IE10-11 и текущего Edge. До сих пор мы не видели, чтобы столь грандиозное нововведение реализовывалось так быстро.
Неудивительно, что люди не понимают, сколько посетителей придется поддержать.
Не стоит упоминать, но все же скажу, что ваши цифры могут быть выше или ниже в зависимости от аудитории вашего сайта.
Но если вы сейчас создаете новый веб-сайт, у вас есть хорошая возможность воспользоваться преимуществами CSS Grid Layout.
Почему мне следует использовать сетки?
Как Я объяснил в предыдущей статье CSS Grid Layout позволяет сделать двухмерный макет без дополнительной разметки для переноса строк.Поскольку макет является двухмерным, элементы в нем могут надежно и предсказуемо занимать несколько строк.
Вы можете добиться некоторых приятный дизайнерские эффекты.
Например, чтобы элементы конструкции были наименее определенной высоты, но растянут с более высоким содержанием - как в этом примере .
Вы можете легко чередуйте элементы фиксированной ширины с гибкими элементами , используя единицу fr в сетке.
Это упрощает работу с элементами макета, которые должны оставаться фиксированного размера.
Может переопределить макет на уровне контейнера , делая адаптивный дизайн простым и настраивая дизайн индивидуально для разных размеров окон.
Вы можете складывать элементы друг на друга , на них распространяется свойство z-index, поэтому разные элементы можно размещать в одних и тех же ячейках сетки, что дает большой простор для творчества.
А как насчет неподдерживающих браузеров?
У CSS есть решение для вас.Во-первых, спецификации Grid и Flexbox уже точно определяют, как эти спецификации переопределяют старые методы компоновки.
Итак, если вы хотите использовать float, встроенные блоки, многоколоночные макеты, флексбоксы или даже display: table в качестве запасного варианта для вашего макета сетки, спецификация уже охватывает все это.
Вы можете переопределить эти методы надежным и предсказуемым способом.
я сделал шпаргалка с объяснением резервных вариантов .
Некоторые из них упомянуты в мой доклад, записанный на конференции Render Ранее в этом году.
CSS также имеет Проверить наличие свободных мест .
У него действительно потрясающая поддержка браузеров, и самое приятное то, что вам не придется беспокоиться о браузерах, которые его не поддерживают. Не существует браузеров, поддерживающих сетки, и браузеров, которые их не поддерживают. поддерживает .
Вот все, что вам нужно в файле CSS:
- Резервный CSS
- CSS для сеток
Те, кто не поддерживает сетки, на этом остановятся.
А те, что поддерживают, будут использовать стили для сеток, и благодаря правилам, которые описаны в спецификации и объяснены в моей шпаргалке , большая часть резервного поведения будет сброшена.
Обычно в резервных стилях вы получаете что-то, что «просачивается» в макет сеток.
Часто это ширина элементов, поскольку в старых макетах вам приходилось задавать им ширину, чтобы имитировать что-то похожее на сетку.
Поэтому мы используем простую директиву поддерживает , проверяем поддержку сетки, и в ней, возможно, возвращаем ширину в auto. В общем, вы можете делать с сеточной версией все, что захотите, не опасаясь, что старые браузеры увидят ее.
Мы пишем CSS, используя CSS. Никаких полифилов, никаких хаков.
Все строго по спецификации.
Но резервные варианты означают, что я пишу макет дважды!
Это справедливо только в том случае, если в своей работе вы исходите из того, что сайты должны выглядеть одинаково во всех браузерах.И угадай что? Это бесполезно.
Вот статья, которую я написал в 2002 году.
В 2002 году люди боялись изучать CSS, потому что это означало бы, что их сайты не будут «выглядеть одинаково» во всех браузерах.
Но я создавал веб-сайты с использованием CSS, пытаясь найти лучший способ сделать это, и учил других людей тому, чему учился.
С момента открытия собственной компании, делаю сайты для клиентов, которым требуется, чтобы все работало в Netscape 4. Я занимаюсь этим на протяжении всей своей карьеры.
Я занимаюсь проблемами совместимости уже 20 лет. Сейчас я делаю продукт с интерфейсом, который должен работать до IE9 .
Я не виноват в существовании этих старых браузеров, но моя проблема и моя работа все эти годы заключались в том, чтобы с ними бороться.
Если ваш сайт Действительно должен выглядеть одинаково во всех браузерах (что бы это для вас ни значило), вы не сможете использовать ничего, что можно сделать только с помощью сеток.
В этом случае не используйте сетки! Используйте Grid Layout, если хотите добиться чего-то, что ни за что сделать его нормальным, используя старые технологии.
Затем создайте запасной вариант, который можно будет использовать в менее продвинутых браузерах, и не беспокойтесь о том, чтобы сделать то же самое.
Сила сеток в том, что с их помощью можно делать то, что раньше было невозможно.
Используйте их для этот , а не воссоздавать свои старые разработки.
Я хочу волшебный полифил!
Если вы глобально поддерживаете весь макет с помощью полифила, это станет кошмаром для пользователей.Если вы реализуете то, что делают сетки, с помощью JS, все это будет ужасно медленно.
Загрузка страницы будет выглядеть ужасно прерывистой.
Гораздо лучше предоставить этим старым браузерам более простой вариант, адаптированный к их возможностям, чем пытаться навязать им сетку с помощью скриптов.
Попытка создать полифилл может значительно задержать время разработки и тестирования, причем для небольшой группы пользователей.
Опять же, если для вашего сайта идеален одинаковый внешний вид для всех, я бы не рекомендовал использовать сетки прямо сейчас.
Приходится смириться с тем, что все те пользователи, которые могли бы пользоваться сеткой, будут лишены ее из-за присутствия в мире старых браузеров.
Вот что значит разрабатывать для Интернета
Работа в сети немыслима без вещей, которые еще не имеют полной поддержки.Такова природа отрасли, в которой мы работаем.
Ваша задача — выяснить неизбежные технологические компромиссы для каждого проекта.
Ваша задача — узнавать новое и консультировать своего клиента или руководство, как лучше всего реализовать свои бизнес-цели, используя все доступные технологии.
А для этого необходимо сначала самому изучить эти новинки.
Затем вы сможете посоветовать им, на какие компромиссы стоит пойти.
Гарантировать единообразный дизайн за счет дополнительной разметки, дополнительного времени разработки или принудительного ограничения удобства использования во всех браузерах? Или упрощенный макет для IE9, который сократит время разработки и сделает сайт более быстрым благодаря новым технологиям? Если вы поймете плюсы и минусы каждого варианта, вы сможете защитить свои аргументы.
Если от использования новой технологии нет абсолютно никакой пользы, не используйте ее.
Но если ваш клиент хочет чего-то, что имеет смысл делать только с новыми технологиями, такими как сетки, или что можно быстро сделать с помощью сеток, но без них ему придется долго страдать, у вас есть много способов объяснить возможные компромиссы.
, их выгоды и издержки.
Объясните их с точки зрения того, сколько времени разработки сейчас и в будущем можно сэкономить благодаря меньшей сложности.
Объясните их, сказав, что дизайнеры создали потрясающий дизайн, который без сеток просто невозможно надежно разложить.
Объясните их скоростью, во многих случаях этот аргумент сработает, потому что можно будет избавиться от громоздкого фреймворка, без которого в противном случае не обойтись.
Все это мы получим в обмен на требование дать упрощенную раскладку старым браузерам.
Но это не значит «нет планировки».
Будьте готовы объяснить, что реализация сеток в браузерах не похожа на реализацию чего-либо в CSS, которое мы видели раньше.
Реализации более совместимы, чем когда-либо.
Edge уже обновил сетки позади флага в предварительной сборке.
Неподдерживаемые браузеры исчезают гораздо быстрее, чем можно было бы предположить из прошлого опыта.
Когда вы вооружены всей необходимой информацией о запрашиваемой цене, обсуждение становится очень простым.
Вы не виноваты, что существуют старые браузеры.
Не начинайте это обсуждение так, как будто вам не удалось сделать так, чтобы сайт выглядел одинаково во всех браузерах, выпущенных за последние 10 лет, с использованием технологии, которой нет и года.
Это не твоя вина, но это твоя проблема.
Это ваша проблема, ваша ответственность как веб-профессионала — поставить себя в такое положение, когда вы сможете выбрать правильный образ действий для каждого проекта.
Вот куда мы идем
Переход от табличного макета к CSS изменил лицо Интернета.Он увел нас от попиксельных изображений к чему-то более гибкому, текстовому и менее похожему на печать.
Последние 15 лет форма Интернета диктовалась техническими ограничениями CSS. Я думаю, что наши новые методы макетирования — сетки, флексбоксы и такие вещи, как веб-формы — снова изменят его внешний вид. Но мы должны позволить этому случиться, мы должны позволить себе экспериментировать, учиться и создавать что-то новое.
Мы сможем сделать это только в том случае, если захотим показать преимущества этих методов людям, для которых мы создаем сайты и приложения.
Мы сможем сделать это, только если отбросим наши предубеждения о сети, браузерах и темпах внедрения, по крайней мере, до тех пор, пока не узнаем обо всех этих вещах.
Только тогда мы сможем принять правильное решение по каждому проекту.
Никогда не будет четкого «или-или»; всегда будут компромиссы.
Наша задача – справиться с этим, как мы всегда это делали.
В опросе могут участвовать только зарегистрированные пользователи.
Войти , Пожалуйста.
Вы уже используете CSS Grid Layout в своих проектах? 17% Да 93 68,01% Нет 372 14,99% Никогда не слышали о CSS Grid Layout 82 Проголосовали 547 пользователей.
120 пользователей воздержались.
Теги: #CSS #HTML #веб-разработка #сетка #CSS Grid Layout #разработка веб-сайтов #CSS #HTML
-
Статьи На Английском Языке.
19 Oct, 24 -
Светодиодная Волшебная Палочка!
19 Oct, 24 -
Планирование Бюджета На Сайт
19 Oct, 24
