Отрисовка буллетов средствами CSS

Рассматривая разные варианты оптимизации скорости сайта, в том числе путем сокращения запросов к серверу, наткнулся на одно интересное решение. Мы все используем буллеты для оформления списков, меню и т.д. Как оказалось можно не только делать буллеты, вставляя символы через content, но и рисовать полноценные треугольные средства CSS.

Прежде чем перейти к самому решению, хочу остановиться на том, что же нам дает использование чистого CSS при реализации буллетов. Как мы помним, время загрузки сайта зависит от нескольких факторов, в том числе и от количества запросов к серверу. Каждый запрос не только требует время на соединение и получение данных (ну будем забывать, что при плохом качестве линии или ограниченном Интернете это может быть существенное время, иногда составляющее секунды), но и так же влияет на последовательность и скорость рендера страницы. Какждый файл, каждая картинка, которые еще не находятся в кэше браузера, это один дополнительный запрос.

Что же мы можем сделать, чтобы сократить запросы? Ну например мы можем объединять картинки в спрайты, тем самым сокращая количество обращений. Но количество передаваемых данных при этом сокращено не будет. А радикально сократить и запросы и объем данных мы можем средствами CSS.

Например, для рисования буллетов сейчас мною используется конструкция content, которая работает с псевдо-элементами :before и :after. Например, нам необходимо реализовать квадратный буллет. Для этого достаточно сделать:

<a href="#" class="square">Ссылка образец</a>

, и в стили данной ссылки необходимо прописать следующее:

.square {}
.square:before {float:left;content:'■';line-height:8px;margin:6px 8px 0 0;color:red;}

В принципе, данное решение меня всем устраивает. Но оказалось, что для самых распространенных в моей практике, треугольных буллетов есть более интересное решение. Для отрисовки буллетов мы будем использовать свойство border. Например, если мы хотим сделать буллет с острым концом треугольника вниз, то воспользуемся следующим решением:

<a href="#" class="square"><span>&nbsp;</span>Ссылка образец</a>

, а в стили данной ссылки необходимо прописать следующее:

.square {padding:0 0 0 12px;}
.square > span {float:left;margin:10px 0 0;width:0;height:0;border-left:0.325em solid transparent;border-right:0.325em solid transparent;border-top:0.325em solid red;}

, если мы хотим сделать привычный нам буллет, то достаточно поменять стили тэга описывающего буллет на:

.square > span {float:left;margin:6px 0 0;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid red;}

Вот такое интересное решение о котором даже решил написать :)