Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript. Обсудить Фронтенд – это первая линия обороны веб-сайта (или, точнее, первая линия «нападения» на пользователя), поэтому у фронтендеров всегда много работы. Чтобы немножко облегчить им жизнь, мы подобрали несколько полезных, но не очень широко известных HTML, CSS и JavaScript-приемов. 1. Быстро скрыть Чтобы спрятать DOM-элемент, вам не нужен JavaScript, достаточно нативного HTML-атрибута hidden. Эффект аналогичен добавлению стиля display: none, элемент просто исчезает со страницы. <p hidden>Этот параграф не виден на странице, он спрятан из HTML.</p> Конечно, с псевдоэлементами такой трюк не сработает. 2. Быстро спозиционировать Вы знакомы с CSS-свойством inset? Это сокращенный вариант для всем знакомых top, left, right и bottom. По аналогии с кратким синтаксисом свойства margin или padding вы можете задать все смещения для элемента одной строчкой. // До div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } // После div { position: absolute; inset: 0; } Использовать краткий синтаксис полезно для уменьшения размера CSS-файла, и код так выглядит чище. Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот. Подробный разбор свойства inset с интерактивными примерами 3. Узнать скорость интернета Вы можете легко определить скорость интернета пользователя из кода на JavaScript с помощью объекта navigator. navigator.connection.downlink; Результат не очень 🙂 Скорость моего интернета всего 5,65 мб/сек. В данный момент это экспериментальная технология, хоть она и поддерживается рядом популярных браузеров, поэтому будьте с ней осторожны. Черновик Network Connection API 4. Включить вибрацию на смартфоне Да, так тоже можно. Метод vibrate() объекта window.navigator может включить режим вибрации на мобильном устройстве. window.navigator.vibrate(500); Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел. 5. Запретить pull-to-refresh Pull-to-refresh (потяни для обновления) – это популярный паттерн мобильной разработки. Если он вам не нравится, просто запретите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain. body { overscroll-behavior-y: contain; } Это свойство также очень полезно для организации прокрутки внутри модальных окон – оно запрещает основной странице перехватывать скролл на себя при достижении границы. 6. Запретить вставлять текст Возможно, вы захотите запретить пользователю вставлять в поля ввода скопированный откуда-то текст (хорошо подумайте, стоит ли оно того). Это очень просто сделать отследив событие paste и вызвав его метод preventDefault(). <input type="text"></input> <script> const input = document.querySelector('input'); input.addEventListener("paste", function(e){ e.preventDefault() }) </script> Упс, теперь не получится копипастить, придется писать вводить все руками. *** Эти приемы используются не очень часто, но могут быть вам полезны в ряде ситуаций. Надеемся, вы нашли что-то интересное для себя.
Фронтенд – это первая линия обороны веб-сайта (или, точнее, первая линия «нападения» на пользователя), поэтому у фронтендеров всегда много работы. Чтобы немножко облегчить им жизнь, мы подобрали несколько полезных, но не очень широко известных HTML, CSS и JavaScript-приемов.
Чтобы спрятать DOM-элемент, вам не нужен JavaScript, достаточно нативного HTML-атрибута hidden. Эффект аналогичен добавлению стиля display: none, элемент просто исчезает со страницы.
hidden
display: none
<p hidden>Этот параграф не виден на странице, он спрятан из HTML.</p>
Конечно, с псевдоэлементами такой трюк не сработает.
Вы знакомы с CSS-свойством inset? Это сокращенный вариант для всем знакомых top, left, right и bottom. По аналогии с кратким синтаксисом свойства margin или padding вы можете задать все смещения для элемента одной строчкой.
top
left
right
bottom
margin
padding
// До div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } // После div { position: absolute; inset: 0; }
Использовать краткий синтаксис полезно для уменьшения размера CSS-файла, и код так выглядит чище. Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Вы можете легко определить скорость интернета пользователя из кода на JavaScript с помощью объекта navigator.
navigator
navigator.connection.downlink;
Результат не очень 🙂 Скорость моего интернета всего 5,65 мб/сек.
В данный момент это экспериментальная технология, хоть она и поддерживается рядом популярных браузеров, поэтому будьте с ней осторожны.
Да, так тоже можно. Метод vibrate() объекта window.navigator может включить режим вибрации на мобильном устройстве.
window.navigator
window.navigator.vibrate(500);
Методу можно передать параметр – время вибрации в миллисекундах. А можно указать даже паттерн – чередование интервалов вибрации и пауз. Для этого передайте методу массив чисел.
Pull-to-refresh (потяни для обновления) – это популярный паттерн мобильной разработки. Если он вам не нравится, просто запретите этот эффект с помощью CSS-свойства overscroll-behavior-y со значением contain.
contain
body { overscroll-behavior-y: contain; }
Это свойство также очень полезно для организации прокрутки внутри модальных окон – оно запрещает основной странице перехватывать скролл на себя при достижении границы.
Возможно, вы захотите запретить пользователю вставлять в поля ввода скопированный откуда-то текст (хорошо подумайте, стоит ли оно того). Это очень просто сделать отследив событие paste и вызвав его метод preventDefault().
paste
preventDefault()
<input type="text"></input> <script> const input = document.querySelector('input'); input.addEventListener("paste", function(e){ e.preventDefault() }) </script>
Упс, теперь не получится копипастить, придется писать вводить все руками.
***
Эти приемы используются не очень часто, но могут быть вам полезны в ряде ситуаций. Надеемся, вы нашли что-то интересное для себя.
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.
Δ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.