/Sundry

Primary LanguageJavaScript

Sundry by Arver

Список

  • ex1 Cделать так, чтобы картинки при рандоме не повторялись
  • ex2 Нестандартные тени

Заметки

  • Строка transform: translateZ(0) не вносит никаких визуальных изменений. Она инструктирует браузер переместить элемент на 0 пикселов вдоль оси Z; иными словами, элемент не двигается вообще. Однако, поскольку он использует трехмерное преобразование, браузер обрабатывает этот стиль с помощью графического процессора. Суть заключается в том, что анимация может воспроизводиться более плавно, потому что графический процессор более производительный.Но только для 2д свойств типа: scale, translate, rotate

source: Дэвид Макфарланд - Большая книга CSS

  • .el + .el { margin-left: value; }

  • srcset не работает с именами файлов с пробелами.

  • transform: rotate( calc( 360deg / 4 ) ); не работает https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12490382/

  • Уловкой запуска асинхронной загрузки стилей является использование элемента и установка недопустимого значения для атрибута media, например значения media = "none".Когда медиа-запрос оценивается как false, браузер все равно будет загружать таблицу стилей, но он не будет ждать, пока контент будет доступен до отображения страницы. <link rel="stylesheet" href="css.css" media="none"> После того, как таблица стилей закончила загрузку, атрибут media должен быть установлен на допустимое значение, поэтому правила стиля будут применены к документу. Событие onload используется для переключения свойства media на все: <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"> Этот метод использует JavaScript, но вы можете обслуживать не-JavaScript-браузеры, обертывая эквивалентные блокирующие элементы в элементе : <link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

  • Версия async <link rel="preload" href="style.css" as="style">Поодерживают не все браузеры,но loadCSS представляется потенциальным решением.

  • polyfill для fetch whatwg-fetch

Vue

-Если на button подвесить метод,не работает пока в методе не прописать e.preventDefault();