Кроссбраузерность

и

кроссплатформенность

Кроссбраузерность

Браузеры и браузерные движки

Браузерный движок представляет собой программу, которая преобразует содержимое веб-страниц (файлы HTML, XML, цифровые изображения и т.д.) и информацию о форматировании (в форматах CSS, XSL и т.д.) в интерактивное изображение форматированного содержимого на экране

Браузеры и браузерные движки

Первые шаги к кроссбраузерности

Определиться с какими именно браузерами должен работать сайт.
Определить особенности соответствующих движков.
Адаптировать под движки нашу вёрстку.

Префиксы браузеров

.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

::-webkit-input-placeholder { color: gray; }
::-moz-placeholder          { color: gray; } /* Firefox 19+ */
:-moz-placeholder           { color: gray; } /* Firefox 18- */
:-ms-input-placeholder      { color: gray; }

Progressive Enhancement

&

Graceful Degradation

— это такая стратегия разработки, при которой ваш веб-интерфейс в первую очередь предназначен для просмотра в современных браузерах

<noscript>
  <!-- содержимое будет видно, если скрипты не поддерживаются или отключены -->
</noscript>

Условные комментарии

<!--[if условие]> специфичный для IE код в HTML <![endif]-->

<!-- 
  Для всех браузеров подключается файл style.css, а для
  IE версии 7.0 и ниже ещё один файл ie.css. При этом,
  остальные браузеры этот файл будут игнорировать и не загружают.
 -->

<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
  <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Progressive Enhancement

— это такая стратегия разработки, при которой разработка веб-интерфейса происходит поэтапно: от простого к сложному.

4 этапа разработки

HTML
CSS
CSS3
JS

Интерактивный пример: https://htmlacademy.ru/demos/1#step1

@supports

@supports <условие> {
  <стилевые правила>
}

Пример использования @supports

/* В старых браузерах будем делать сетку на float,
 * а в новых на флексах
 */

section {
  float: left;
}

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
  section {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    float: none;
  }
}

Кроссплатформенность

Резиновая верстка

Адаптивная верстка

Отзывчивая верстка

@media (prefers-color-scheme: dark) {}

Мобильная версия

По сути это другой сайт, с другой версткой и дизайном. Только с учетом того, что можно делать на платформе, с которой открывается сайт.

Mobile first

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

By frontschool-nsk

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

Кроссбраузерность

и

кроссплатформенность