Компьютерное

У начинающих верстальщиков часто возникает вопрос, как отцентрировать текст в блоке по горизонтали и вертикали. С горизонталью всё достаточно просто: используем свойство text-align. А вот для вертикали раньше приходилось прибегать ко всяческим ухищрениям. Но с появлением flex-верстки всё стало намного проще. Зададим в CSS класс, для которого пропишем выравнивание по центру по главной и вспомогательной оси:
.centered { display: flex; justify-content: center;  align-items: center; text-align: center }
И просто применим его к нужному блоку:
<div class="centered">Немного текста <br /> и дополнительного <br />содержимого</div>
Посмотреть пример

Иногда возникает задача сделать на сайте бегущую строку. В свое время для этого существовал специальный тег marquee, однако официально он не был включен ни в одну из спецификаций HTML, поэтому пользоваться им нежелательно. Второй вариант — это сделать прокрутку средствами JavaScript, задав бегущей строке padding-left (или просто left, если контейнеру с ней выставлено свойство absolute) и регулярно уменьшая его с помощью setInterval. Главный недостаток этого варианта — большая нагрузка на процессор, кроме того, прокрутка получается не плавной, а рывками.
Но для современных броузеров есть еще один вариант, основанный на CSS animations. В отличие от варианта с JavaScript, он позволяет сделать прокрутку достаточно плавной и при этом дает больше возможностей. Самый простой вариант его реализации выглядит так. Читать далее…

Очень часто при разработке сайта забывают о его оптимизации для печати. В чем же она заключается? По сути, в ней две составляющих: сделать так, чтобы лист использовался рационально, и убрать все то, что на бумаге бесполезно:

• навигационное меню
• формы для поиска по сайту и комментариев
• рекламные блоки, виджеты соцсетей и кнопки «поделиться»
• различные всплывающие и накладывающиеся поверх основного контента элементы (например, на этом сайте это ссылка «Задать вопрос» справа)
• облако тегов
• «подвал» сайта

Но не переусердствуйте! Обязательно оставьте видимыми «хлебные крошки», название и логотип сайта, а также контактные телефоны и Email, если они есть на сайте.
Кроме того, следите, чтобы при печати использовалась вся ширина листа, то есть не было бы жестко заданной ширины в пикселях для сайта в целом или для основного блока с контентом.
Как это сделать технически? Некоторые CMS позволяют создавать отдельные страницы для печати. Но это плохое решение: с точки зрения поисковых систем получаются дубли страниц, причем иногда версия для печати индексируется лучше, чем основная, и пользователи из поисковых систем, попадая на нее, не могут понять, как перейти на основной сайт. Поэтому лучше использовать средства CSS — media-запрос print, переопределив с его помощью CSS-свойства элементов на основной странице. Читать далее…

В Интернете есть примеры асинхронной загрузки CSS через setTimeout или манипуляции с media, но есть более красивое и современное решение — через rel=preload. Выглядит оно так:
<link type="text/css" href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'" /> <noscript> <link type="text/css" href="style.css" rel="stylesheet" /> </noscript>
Однако следует помнить, что если вы асинхронно загружаете основной CSS без выноса его критической части в тег style непосредственно в HTML, то получается довольно неприятный эффект — сначала страница отображается без стилей вообще, потом тут же перерисовывается заново. Поэтому такую асинхронную загрузку лучше применять только к вспомогательным CSS.

Недавно потребовалось сверстать страницу, на которой у элемента checkbox был бы увеличен размер. Варианты с рисованным checkbox, который переключался бы с помощью JavaScript для меня изначально были неприемлемы Сначала пытался воздействовать на него с помощью font-size, line-height, padding и border, но ничего из перечисленного не помогло. Потом обнаружил, что свойства height и width, выставленные одновременно, позволяют добиться желаемого. Но увы, оказалось, что только в Google Chrome. В результате пришлось воспользоваться воспользоваться свойством transform из CSS 3: <input type="checkbox" style="transform: scale(2)" />, но при этом сам checkbox становится размытым.

Поэтому тем, кому валидность CSS не критична, посоветовал бы делать несколько иначе:

.bigbox { -ms-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); height: 28px; width: 28px }

Такой подход позволит отрисовывать checkbox в Google Chrome нужного размера, а в остальных броузерах — масштабировать с размытием.

Обновлено в мае 2018: теперь свойства height и width работают во всех броузерах, включая Firefox. Можно ограничиться ими:

.bigbox { height: 28px; width: 28px }