Несколько хаков для фронтенда, о которых вы, возможно, не знали
Мы собрали и подготовили список из некоторых интересных JavaScript и CSS хаков, о которых вы могли даже не подозревать.
Обрезаем текст средствами CSS
element { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
Этот хак обрежет текст по ширине контейнера и добавит многоточие в конце обрезанной строки. Вот как обстоят дела с поддержкой, а здесь можно посмотреть вживую.
Вычисление ширины элемента по родителю
Есть несколько хаков, связанных с изменением ширины элемента относительно родительского.
Например:
element { width: calc(100% - 50px); }
Устанавливает значение ширины элемента на 100% от родительского - (минус) 50px. Может оказаться полезным для мобильной версии сайта, к тому же имеет неплохую поддержку браузерами, в том числе мобильными.
Разумеется, с парамерами вроде ширины можно делать всякое, не только вычитание. К примеру, можно делить или умножать:
element { width: calc(100% / 6); }
Выравниваем блок вертикально
element { position: relative; top: 50%; transform: translateY(-50%); }
А также еще один способ выровнять блок по горизонтали:
element { position: relative; left: 50%; transform: translateX(-50%); }
Немного магии атрибутов селектора
Выберем все <a>, содержащие атрибут ссылки:
a[href] { … }
Выберем все <a>, содержащие в ссылке подстроку определенного вида:
a[href^="http"] { … }
"^=" здесь означает "начинается с"
Выберем все элементы, у которых есть класс:
element[class] { … }
Может пригодиться, например, если классы добавляет JS.
Нужно отдельно пометить ссылки на контент определенного типа? Это можно сделать так:
a[href$=".zip"]:after { content:"(zip)"; }
"$" здесь означает "оканчивается на"
Найдем изображение по одному слову в alt:
img[alt~="poland"] { … }
Или найдем фотографии из определенного каталога:
img[src|="-april-"] { … }
Треугольники
Видели эти маленькие треугольные хвосты у блоков? Вот тут на них можно посмотреть. А сделать их можно, напрмер, так:
.triangle { width: 0; height: 0; border-top: 100px solid #0099ff; border-left: 100px dashed transparent; border-right: 100px dashed transparent; border-bottom: 0; display: block; overflow: hidden; }
Работает даже в IE6!
Конвертируем/копируем аргументы массива или NodeList в реальный массив
А теперь рассмотрим несколько хаков, связанных с JS.
function() { args = Array.prototype.slice.call(arguments); }
Аккуратные функции для работы с массивами
[1,2,3,4].reduce(function(x,y) { return x + y; }) [1,2,3].some(function(x) { return x === 2 });
Ключевое слово in
Массивы в JS реализованы как ассоциативные, благодаря чему будет работать такой пример:
3 in [1,2,3,4] // вернет true, если есть элемент с индексом 3 (именно с индексом, а не значением) Infinity in window // вернет true для всех объектов
Унарные операторы +
и ~~
Унарный оператор +
конвертирует строку в число, при этом он пишется короче и работает быстрее, чем parseInt
:
+"55" === 55 // вернет true
А в этом случае ~~
будет быстрее, чем Math.truncate()
:
~~27.4 === 27 // вернет true
Как alert()
, только console()
Если вы привыкли использовать на страницах alert() для вывода отладочной информации или не можете понять, откуда эти алерты вылезают, можно воспользоваться такой штукой:
alert = console.log.bind(console);
Теперь при попытке сделать алерт на странице вывод все равно попадет в консоль.
Элемент точно по ширине и высоте экрана
Иногда нужно сделать так, чтобы конкретный элемент всегда был в точности по ширине и высоте страницы. Можно использовать пару таких строк во время onload
и onresize
:
document.getElementById('element').style.height = window.innerHeight+'px'; document.getElementById('element').style.width = window.innerWidth+'px';
Конечно, width
и height
по 100%
каждый никто не отменял, но иногда работа с чистым CSS может доставить только больше хлопот. Например, если родительский элемент имеет свои width
и height
, которые менять очень не хочется, а придется.