Пожаловаться

Несколько хаков для фронтенда, о которых вы, возможно, не знали

9360
Пожаловаться

Мы собрали и подготовили список из некоторых интересных 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, которые менять очень не хочется, а придется.

Другие статьи по теме

Фронтенд и бэкенд: о самом главном

Освоить основы фронтенда за 12 часов: большая видеоподборка

9360

Комментарии

Рекомендуем

BUG!