Как стать автором
Обновить

Мобильные браузеры и position:fixed

CSS *JavaScript *Разработка мобильных приложений *
Recovery mode
Tutorial
CSS-свойство position:fixed в Mobile Safari сносно работает начиная c iOS 5. В Android родной браузер частично понимает это свойство начиная с версии системы 2.1, адекватно — с 2.2, полная поддержка — с 3.0. Подробнее: таблица поддержки position:fixed.

HTML:
<div id="topbar">Fixed Title</div>
<div id="content">
	<h2>Start</h2>
	<p>Main content text </p>
	...
	<p>Main content text </p>
	<h2>End</h2>
</div>
<div id="bottombar">Fixed footer</div>

CSS:
#content{
	padding: 50px 0; /* отбиваем высоту баров, чтобы не перекрывать контент вверху и внизу страницы */
}
#topbar,
#bottombar {
	position: fixed;
	left: 0;
	width:100%;
	height: 50px; /* фиксируем высоту для простоты */
	line-height:50px;
	background:#eee;
	text-align: center;
}
#topbar {top: 0;}
#bottombar {bottom: 0;}


Теперь в современных смартах у нас topbar и bottombar «прибиты» соответственно к верху и к низу окна. Проблема позицонирования при первом скролле в iOS решается мини-Javacript'ом (исправлено):
window.scrollBy(0, 1);

А как быть со старичками?
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 37K
Комментарии 11

AAML: Простейший язык разметки для Android

Разработка под Android *
Возможно вы сочтете это глупостью, но я не люблю IDE. Обычно всю работу проделываю в vim+tmux+терминал. Я признаю все преимущества IDE, просто мне удобнее в хорошем текстовом редакторе. Но речь не об этом.

Когда я пишу что-нибудь под андроид — я часто правлю XML (разметку, стили, строки, ...). Так вот в текстовом редакторе это делать не очень удобно. И я решил потратить пару часов и написать генератор XML на основе упрощенного языка разметки (типа lesscss или stylus для CSS). Все-таки NIH — очень уж соблазнительный стимул.
Читать дальше →
Всего голосов 32: ↑29 и ↓3 +26
Просмотры 11K
Комментарии 12

Использование разметки schema.org для логотипов организаций

Блог компании Google Developers Разработка веб-сайтов *
Перевод
Уровень подготовки веб-мастера: любой

Теперь наша система поддерживает разметку schema.org для логотипов организаций. Это позволит вам выбрать логотип, который будет представлять ваш сайт в результатах поиска Google.

С помощью этой разметки вы можете указать системе, где находится ваш логотип. Например, если вы – владелец сайта www.example.com, можно использовать следующую разметку элементов на странице:

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Главная</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>

Читать дальше →
Всего голосов 46: ↑43 и ↓3 +40
Просмотры 31K
Комментарии 11

Работа со структурированными данными в Google

Блог компании Google Developers Разработка веб-сайтов *
Перевод
Уровень подготовки веб-мастера: любой

Если Google распознает контент на вашем сайте как структурированные данные, то сможет отобразить больше полезной информации о нём. Например, если ваша страница посвящена описаниям товаров или мероприятий, рецептам, отзывам и другим подобным материалам, наши алгоритмы могут улучшить результаты поиска с помощью расширенных описаний веб-страниц. Сведения о вашем сайте также могут отображаться в сети знаний или в подсказках Google Now, привлекая потенциальных клиентов.

Сегодня мы представляем вам две новинки. Первая – это семь типов структурированных данных в Маркере, которые ранее не поддерживались, а вторая – инструмент под названием «Мастер разметки структурированных данных».
Читать дальше →
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 24K
Комментарии 0

PopulateJS: don't repeat yourself в HTML-разметке

CSS *JavaScript *HTML *
Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML'ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

Добро пожаловать под кат, если вам это хорошо знакомо
Всего голосов 25: ↑17 и ↓8 +9
Просмотры 8.4K
Комментарии 18

Рассылай и властвуй: вёрстка рассылки тогда и сейчас

Блог компании 2ГИС CSS *Интерфейсы *HTML *Верстка писем *
image

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.
Утри слёзы, верстальщик
Всего голосов 38: ↑37 и ↓1 +36
Просмотры 14K
Комментарии 9

Рассылай и властвуй: инструменты для создания и тестирования рассылки

Блог компании 2ГИС CSS *Интерфейсы *HTML *Верстка писем *


Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.
Победить Outlook
Всего голосов 43: ↑40 и ↓3 +37
Просмотры 19K
Комментарии 6

Gap — светлое будущее для отступов в Flexbox (как в Grid)

Разработка веб-сайтов *CSS *HTML *
Перевод


Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки.

Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS.

W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column.

В этом руководстве мы посмотрим, как добавляли margins в Flexbox раньше и как это делает свойство gap, позволяя нам получить внутренние отступы без дополнительных ухищрений.
Читать дальше →
Всего голосов 14: ↑14 и ↓0 +14
Просмотры 79K
Комментарии 22

Атрибуты HTML, которыми вы никогда не пользовались

CSS *HTML *
Перевод

В январе этого года Мэдисон Канна спросила у своих подписчиков в Twitter:

Какие языки/технологии вам бы хотелось изучить или узнать глубже в этом году?

Мой выбор: typescript, next.js, react, graphql, solidity, node — Мэдисон Канна (@Madisonkanna) January 3, 2022

Мой ответ был очень простым: HTML. И я ни в коей мере не был саркастичным или насмешливым. Разумеется, я неплохо знаю, какие теги использовать в каких случаях и как обеспечивать семантику и доступность моего HTML.

Однако существует целая куча малоиспользуемых атрибутов, о которых я забыл, и, вероятно, целая куча атрибутов, о существовании которых я и не знал. Этот пост стал результатом моих исследований, и я надеюсь, что он окажется для вас полезным при создании страниц на HTML.
Читать дальше →
Всего голосов 75: ↑75 и ↓0 +75
Просмотры 25K
Комментарии 9

Метод document.write, подобное и связанное с ним

JavaScript *HTML *
Из песочницы

Данная заметка является своего рода комментарием к другой статье на Хабр-е Удивительная история document.write, которая, в свою очередь, представляет из себя перевод публикации с сайта https://eager.io/ The Curious Case of document.write. Я же здесь хочу лишь подчеркнуть определённую полезность данного метода клиентского JavaScript (https://developer.mozilla.org/ru/docs/Web/API/Document/write), а также немного порассуждать о подходах и проблемах, связанных с генерацией разметки.

Читать далее
Всего голосов 9: ↑3 и ↓6 -3
Просмотры 2.2K
Комментарии 10

Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера

CSS *JavaScript *HTML *ReactJS *Дизайн
Из песочницы

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 3K
Комментарии 8