kldkv

Кто-нибудь боролся с Safari 11, 
display: contents не поддерживает, но 
@supports (display: contents) положителен и 
CSS.supports('display', 'contents') = true

Я пока всунул хак в js 
CSS.supports('display', 'contents') && 
!CSS.supports('position', '-webkit-sticky');
в css
(display: contents) and (not (position: -webkit-sticky))

kldkv

// fork from https://jsfiddle.net/311aLtkz/


// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 

kldkv

<picture>
	<source
		media="(min-width: 1280px)"
		sizes="50vw"
		srcset="opera-fullshot-200.webp 200w,
				opera-fullshot-400.webp 400w,
				opera-fullshot-800.webp 800w,
				opera-fullshot-1200.webp 1200w,
				opera-fullshot-1600.webp 1600w,
				opera-fullshot-2000.webp 2000w"

kldkv

      /*
      // Bootstrap 3 mixin
      */

      $columns: 12;
      $atom: (100% / $columns);
      $paddings: 15px;
      $margins: ($paddings * -1);
      /**/

kldkv

//Variables
Mobile first
$s_mob: 600px;
$s_tab: 900px;
$s_des: 1200px;
$s_des-lg: 1800px;

Mobile first
@mixin media($size) {
  @if $size==$mob {

kldkv

(min-resolution: 144dpi)
(min-resolution: 288dpi)

kldkv

// Desktop first
$mob: 600px;
$tab: 900px;
$des: 1200px;
$des-lg: 1800px;
@mixin media($size) {
  @if ($size==$mob) {
    @media only screen and (max-width: $mob - 1) {
      @content;
    }

kldkv

/*
// Bootstrap 4 mixin
*/

$columns: 12;
$atom: (100% / $columns);
/**/

@mixin bs($what, $number:"") {
  @if ($what=="container") {

kldkv

<svg class="icon icon--phone">
  <use xlink:href="../img/svg/_sprite.svg#phone"></use>
</svg>

kldkv

Thin (Hairline)
100

Extra Light (Ultra Light)
200

Light
300

Normal (Regular)