Изучая очередные материалы по возможностям ускорения сайта, обнаружил одну интересную технику, позволяющую сократить количество подгружаемой мелкой графики, и не мелкой тоже, но больше всего данное решение подходит именно к мелкой графике, а точнее к иконкам. Техника эта заключается в замене графических иконок и других возможных изображений символами из импортированного шрифта.
Рассматривая разные варианты оптимизации скорости сайта, в том числе путем сокращения запросов к серверу, наткнулся на одно интересное решение. Мы все используем буллеты для оформления списков, меню и т.д. Как оказалось можно не только делать буллеты, вставляя символы через content, но и рисовать полноценные треугольные средства CSS.
Продолжая осваивать адаптивную верстку, как элемент адаптивного дизайна, решил написать про медиа-запросы или медиазапросы, в оригинале media-queries. Как мы помним из теоретических основ адаптивной верстки и адаптивного дизайна, медиа-запросы это одна из основных концепций данной технологии и без ее глубокого понимания освоить адаптивную верстку просто не получится.
Все большую популярность в веб разработке получает кроссбраузерная адаптивная верстка. Тема эта большая и практически неисчерпаемая, так как постоянно появляются новые HTML теги, идеи и решения. Чтобы не отставать от прогресса и понимать, как устроена адаптивная верстка, попробуем разобраться в основах адаптивного дизайна и адаптивного сайтостроения.
Очередное небольшое решение из мира верстки и CSS. Любой верстальщик регулярно сталкивается с маркированными списками и маркерами для этих списков, которыми можно красиво стилизовать эти списки, особенно если это пункты меню. Списки выглядят круто и вроде больше ничего не надо дорабатывать, пока не появляется многострочный пункт, когда переносящийся текст начинает выглядеть некрасиво.
В последнее время все чаще встает необходимость в момент верстки задавать фиксированную ширину для пунктов меню. Почему в последнее время спросите вы? Не так давно начал осваивать адаптивную верстку, одна из концепций которой позволяет (а иногда вынуждает) задавать ширину в процентном соотношении. Плюсы подобного подхода в том, что при любом разрешении экрана мы получим именно тот размер, который нами был запланирован. Больше никаких непонятных переносов при изменении размера экрана.
Любой разработчик рано или поздно сталкивается с тем, что дизайнер в ходе создания макет импортировал в него "небезопасный" шрифт, и соответственно мы столкнемся с тем, что у некоторых пользователей шрифт будет не тем, какой планировал дизайнер. А значит теряется не только целостность задуманной дизайнером картинки, но и кроссбраузерность верстки.
В ходе разработки проектов разного уровня сложности часто возникает вопрос, как сократить количество запросов к серверу и тем самым увеличить скорость загрузки сайта. Одним из способов, сократить количество запросов это использование спрайтов (sprites). Метод, при котором картинки объединяются в большую коллекцию картинок, которые потом выводятся на HTML странице отдельными картинками средствами CSS.