Мы собрали и подготовили список из некоторых интересных JavaScript и CSS хаков, о которых вы могли даже не подозревать.
Этот хак обрежет текст по ширине контейнера и добавит многоточие в конце обрезанной строки. Вот как обстоят дела с поддержкой, а здесь можно посмотреть вживую.
Есть несколько хаков, связанных с изменением ширины элемента относительно родительского.
Например:
Устанавливает значение ширины элемента на 100% от родительского – (минус) 50px. Может оказаться полезным для мобильной версии сайта, к тому же имеет неплохую поддержку браузерами, в том числе мобильными.
Разумеется, с парамерами вроде ширины можно делать всякое, не только вычитание. К примеру, можно делить или умножать:
А также еще один способ выровнять блок по горизонтали:
Выберем все <a>, содержащие атрибут ссылки:
Выберем все <a>, содержащие в ссылке подстроку определенного вида:
“^=” здесь означает “начинается с”
Выберем все элементы, у которых есть класс:
Может пригодиться, например, если классы добавляет JS.
Нужно отдельно пометить ссылки на контент определенного типа? Это можно сделать так:
“$” здесь означает “оканчивается на”
Найдем изображение по одному слову в alt:
Или найдем фотографии из определенного каталога:
Видели эти маленькие треугольные хвосты у блоков? Вот тут на них можно посмотреть. А сделать их можно, напрмер, так:
Работает даже в IE6!
А теперь рассмотрим несколько хаков, связанных с JS.
Массивы в JS реализованы как ассоциативные, благодаря чему будет работать такой пример:
Унарный оператор + конвертирует строку в число, при этом он пишется короче и работает быстрее, чем parseInt :
А в этом случае
будет быстрее, чем Math.truncate() :
Если вы привыкли использовать на страницах alert() для вывода отладочной информации или не можете понять, откуда эти алерты вылезают, можно воспользоваться такой штукой:
Теперь при попытке сделать алерт на странице вывод все равно попадет в консоль.
Иногда нужно сделать так, чтобы конкретный элемент всегда был в точности по ширине и высоте страницы. Можно использовать пару таких строк во время onload и onresize :
Конечно, width и height по 100% каждый никто не отменял, но иногда работа с чистым CSS может доставить только больше хлопот. Например, если родительский элемент имеет свои width и height , которые менять очень не хочется, а придется.