Главная » Записи с тегом "разметка"

Рубрики с меткой ‘разметка’

Вызываем ветер (скрипты)

Главная техника, которую мы используем, чтобы сохранить наш Javascript ненавязчивым, это хранение скрипта в отдельном файле, что предпочтительней, чем смешивать его с разметкой страницы. Чтобы исполнить функции в нашем .js файле, нам надо вызвать их, когда страница загружена. Это может быть достигнуто различными способами, каждый имеет свои достоинства и недостатки.

Читать далее »

Сокращение времени загрузки страниц с помощью CSS

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

1. Избегайте использования таблиц для разметки страницы Читать далее »

Несвоевременные мысли о CSS

Краткое содержание

Задача: воспроизвести с помощью CSS основную страницу WebReference. Инструменты: CSS и много свободного времени.

Kwon Ekstrom предложил свою CSS версию главной страницы WebReference. Rogelio Lizaolo улучшил ее. Через несколько месяцев напряженной совместной работы финальный вариант на CSS полностью повторял прежний, табличный. В процессе мы обнаружили массу ошибок в NN и IE и нашли несколько элегантных уловок для их обхода. Ниже следует наша пошаговая инструкция, с помощью которой вы можете повторить наш подвиг. Читать далее »

Каскадные таблицы стилей (преимущества и недостатки)

Точное расположение объектов на странице относительно друг друга является, пожалуй, одной из самых сложных задач для веб-мастера. Написать HTML-код страницы так, чтобы все графические изображения и текстовые блоки были на своих местах не только на компьютере веб-мастера, но и у всех посетителей сайта, — настоящее искусство. Максимально крупный кегль, выставленный пользователем в своем браузере, может великолепное творение превратить в беспорядочное нагромождение теста и картинок. Читать далее »

PHP и формы

Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.
Читать далее »

Порядок свойств CSS3 имеет значение

При указании свойств CSS3 современная мудрость гласит: «ставь реальное свойство CSS3 после всех браузерозависимых свойств»:

1 .not-a-square {
2 -webkit-border-radius: 10px
3 moz-border-radius: 10px;
4 border-radius: 10px;
5 }

Существует также другой «неправильный способ»: Читать далее »

Показ информации о продукте при помощи 3D преобразований CSS3

Существует множество способов показа информации о продукте. Например, при наведении на изображение продукта, информация о нём появляется выше или даже всплывает новое окно. В этом уроке я покажу как отобразить информацию о продукте используя кубический стиль 3D преобразования CSS3.

Результат Читать далее »

Главный секрет HTML5

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

И тем не менее, HTML5 повсюду. Даже там, где его не ждали. Даже там, где нет модного короткого доктайпа <!DOCTYPE html> (кстати, тоже без цифры 5), даже без модных «семантичных» (хотя об их смысле не всегда могут договориться сами разработчики спецификаций, не говоря уже о простых вебмастерах) элементов типа <article> и <nav>. Даже в тех браузерах, где эти новые теги и не работают без пинка. Как это может быть? Читать далее »

Отображение величин при помощи тега meter

HTML 5 вводит несколько полезных новых элементов с целью добавить значимости разметке страницы. Среди этих новых элементов <time>, <mark>, а также еще один – <meter>. Это встраиваемый тег, по-этому он может быть использован внутри большинства элементов, в том числе хедера или абзаца.

Что сказано в спецификации?

Элемент <meter> отображает скалярные величины в заданном диапазоне или дробные числа, например, использование места на диске, релевантность поискового запроса или долю определенного кандидата в общем числе голосов избирателей. Читать далее »

Какое выбрать решение для адаптивных изображений?

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

Вся информация есть в этой таблице, но давайте рассмотрим ее с точки зрения практических вопросов и таким образом как-то систематизируем. Читать далее »