2012-02-24

Блоковая модель в CSS

За много лет у меня выработалась привычка использовать только те приемы CSS верстки которые дают одинаковые результаты во всех браузерах. При этом уже различия браузеров меня не сильно и волнуют - я просто не использую приемы которые могут не работать в том или ином браузере. При этом, есть вещи которые ни в коем случае нельзя делать, чтобы не усложнять себе жизнь. Одна из таких запретных вещей - никогда нельзя указывать одновременно ширину элемента вместе с padding, margin или border. Если так сделать то разверзнуться небеса и боги CSS будут гневно метать в вас молнии а демоны Interhet Explorer сделают с вами чего похуже.

Чтобы наглядно показать почему так нельзя делать я создал файлик. В нем четыре раскрашенных примера:

1. div с шириной 300 пикселей;
2. div с шириной 300 пикселей и рамкой;
3. div с шириной 300 пикселей, рамкой и паддингом;
4. div с шириной 300 пикселей, рамкой, паддингом и маржином;

Как мы видим, во всех браузерах (я использовал FF, Сhrome и IE, для простоты будем называть этот набор "всеми браузерами") картина примерно одинаковая. При этом обратите внимание - ширина 300 пикселей применяется к внутренней области HTML элемента. Т.е. если задать у элемента десятипиксельные бордер, паддинг и маржин то ширина элемента будет 360 пикслелей.

Такое поведение кажется совершенно нелогичным, но это факт - и в стандарте CSS это четко прописано. Как следствие - невозможно использовать ширину 100% вместе с паддингом, маржином или бордером - тогда элемент гарантированно вылезет за пределы своего владельца, что приведет к весьма непредсказуемым результатам. 

Но это только одна сторона медали, теперь уберем из файла DOCTYPE. Как мы знаем html файлы без DOCTYPE в Internet Explorer обрабатыватются совершенно по-другому чем с оным. Это так называемый QuirckMode или еще его называют "режим совместимости".

Во всех браузерах картинка осталась такой же. Кроме Internet Explorer.

Как мы видим не только мне блоковая модель описанная в CSS не понравилась - разработчики IE тоже посчитали её нелогичной, поэтому в ширину элемента в IE входит бордер и паддинг.

Хотя режим совместимости в браузерах используется все реже и реже указанные особенности приходится учитывать при создании страничек на HTML.

 

Оставить комментарий

 
  2012-01-31

Firefox под Android поддерживает камеру

Несколько дней назад, холодным зимним вечером телефон мне сказал что неплохо бы обновить Firefox. Причём, обновиться нужно непременно в ручном режиме, обычно, такое случается когда какие-то права в приложении Android были изменены. Предчувствия меня не обманули приложение в этот раз захотело права доступа к камере.

Теперь Firefox умеет закачивать картинки на сайт можно прямо с камеры. Работает это следующим образом: рядом с обычной кнопкой upload появляется кнопка capcture, при нажатие на которую появляется небольшое окно с картинкой с камеры. Для того, чтобы значок capture появился нужно у тега input[type=file] указать атрибут accept="image/png"

Откройте страничку в мобильном Firefox и убедитесь: http://maxistar.ru/kitchen/camera.html

Тестировалось на Motorolla Milestone 2 (Android 2.2)

 

Оставить комментарий

 
  2012-01-31

Собственный домен для Amazon S3

Amazon представляет замечательный сервис для хранения данных в облаке известный как Amazon S3. Но при всей своей замечательности файлы, хранимые в облаке, имеют доменное имя http://s3.amazon.com/[имя корзины]/путь/к/файлу.gif. Ежу понятно, такое имя совершенно некрасиво и хочется, чтобы оно было покрасивее. Разработчики пошли нам навстречу и сделали, чтобы к файлу можно было обращаться по имени http://[имя корзины].s3.amazon.com/путь/к/файлу.gif

Немного лучше, но не айс - всё равно, доменное имя некрасивое. Оказывается, для S3 можно указать собственное доменное имя третьего уровня. Для этого достаточно именем корзины выбрать желаемое доменное имя и создать CNAME запись со ссылкой на амазоновский сервер.

Алгоритм работы следующий:

1. Создаем корзину с именем домена для наших файлов (в моем случае это s3.o.itaccept.ru)
2. Создаем CNAME запись для домена третьего уровня ссылающуюся на s3.amazonaws.com

Если все получилось но после обновления DNS ваши файлы будут видны по трем адресам: http://s3.o.itaccept.ru.s3.amazonaws.com/folder2/banner.jpg, http://s3.amazonaws.com/s3.o.itaccept.ru/folder2/banner.jpg, http://s3.o.itaccept.ru/folder2/banner.jpg

 

Оставить комментарий

 
  2011-12-27

HTML5 сегодня

Всё больше и больше разработчики начинают использовать HTML5. При этом большинство браузеров до сих пор не умеют нормально поддерживать HTML5, и под большинством я подразумеваю Internet Explorer версии ниже чем девятка, который стоит у большей части интернет пользователей. При этом, у IE есть одна нехорошая особенность - если он встречает в разметке незнакомый тег - он просто его игнорирует. Старые версии Firefox ведут себя более терпимо к незнакомым элементам - незнакомые теги используются в отображении контента если для них задан display:[something], поэтому, и если для незнакомых элементов задать стили отображения в CSS то они будут отображены как надо. IE незнакомые теги просто проигнорирует.

Чтобы исправить такое поведение браузера Реми Шарп (Remy Sharp) сделал маленький скрипт заменяющий теги типа article, section и прочие обычными div'ами. Конечно, теги типа video работать не будут, но зато теперь можно использовать контекстные HTML теги типа section, footer, header и прочие.

Насколько это оправдано я пока не прочувствовал, но, как факт, HTML5 теперь вполне можно использовать для кроссбраузерной вёрстки. Хотя, лично для меня, преимущества HTML5 тегов пока выглядят спорными, но многим нравится, особенно тем кто заказывает музыку, а значит, придётся с этим считаться.

 

Оставить комментарий

 
  2011-05-24

Рубины на рельсах

Сел разбираться в Ruby - существо занятное, мне оно больше всего напоминает JavaScript, хотя синтаксис весьма безумен... Хотя... если разобраться так я могу и на JS написать так, что никто не поймет...

 

Оставить комментарий

 
  2011-04-26

Leverage browser caching

Для того чтобы проверить есть ли у сайта узкие места можно воспользоваться мега полезной штукой Page Speed Plugin. Работает в chrome и firefox. Оказывается на большинстве сайтов по умолчанию не выводятся заголовки которые говорят браузеру как правильно кешировать ресурсы

На linode.com для решение проблемы добавил в httpd.conf следующее:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/x-icon "access plus 2 weeks"
    ExpiresByType image/png "access plus 2 weeks"
    ExpiresByType image/jpeg "access plus 2 weeks"
    ExpiresByType image/gif "access plus 2 weeks"
    ExpiresByType text/javascript "access plus 1 week"
    ExpiresByType text/css "access plus 1 week"
</IfModule>

На другом сервере указанное действо оказалось недостаточным пришлось добавить:

Header unset Pragma
FileETag None
Header unset ETag

И еще включил сжатие для некоторых файлов:
AddOutputFilterByType DEFLATE text/css application/x-javascript application/javascript

 

 

Оставить комментарий

 
  2011-03-25

New York Times in HTML5

Нью-Йорк Таймс сделали online версию своей газеты на HTML5, однако, действительно, удобная штука получилась, как будто читаешь реальную газету. Нужно будет присмотреться повнимательнее к этой технологии.

 

Коментариев: 3

 
  2011-02-24

Домены за сто рублей

Давно хотел написать, да все было лень. Обычно я покупаю домены в зоне ru примерно за 500 рублей. В интернете полно предложений на этот счет, но недавно узнал, что, оказывается цена доменов практически ничем не регулируется - поэтому регистраторы продают домены по той цене по которой их покупают.

На сайте www.2domains.ru сейчас можно купить домены в зоне ru на год за 99  рублей. При этом через год, продление домена также будет стоить 99 рублей.

Я сначала подумал — развод, но когда я таким образом зарегистрировал aiki-center.ru и seikikan.ru — все прошло на ура. Ребята предоставляют доступ к площадке reg.ru а reg.ru вполне себе солидный регистратор. Оплачивать можно через мобильный кошелёк QIWI - это вообще сказка. На сайте сказано, также, что можно переносить домены от других регистраторов и тогда их продление также будет стоить сто рублей. Это я еще не проверял, но переплачивать за домены как то не хочется, поэтому когда придет время что-нибуть продлять обязательно попробую.

 

Коментариев: 1

 
  2011-02-18

DNSBL

Потребовалось проверить некий IP адрес на наличие в блеклистах. Обычно для проверки занесен ли адрес в блеклист используют класс pear Net_DNSBL но у меня локально он наотрез отказался работать корректно, к тому же он требует чтобы PHP был не ниже 5.3.x.x. Такое его поведение мне не понравилось, поэтому решил разобраться как на самом деле происходит проверка. Оказалось все банально до пошлости: сам блеклист есть не что иное как набор DNS файлов на некоем сервере. Допустим, нужно проверить есть ли IP 1.2.3.4 на блеклисте 'db.wpbl.info' для этого просто достаточно проверить существует ли субдомен: 4.3.2.1.db.wpbl.info (обратите внимание - IP указывается в обратном порядке). Если существует - адрес в блеклисте, если нет - на нет и суда нет. Функция checkdnsrr нам в помощь.

По аналогии с  http://www.dnsbl.info/dnsbl-database-check.php сделал аналогичный сервис у себя на сайте - на всякий случай.

Кстати, оказалось что ренетовский IP через который я выхожу в Internet находится сразу в нескольких блеклистах из этого списка.

 

Оставить комментарий

 
  2010-12-01

Семантический CSS

Если вы когда либо занимались HTML версткой, то вам наверняка доводилось  слышать от клиентов фразы типа: "сделай эту надпись больше", "этот заголовок должен быть красным",  все синие заголовки сделать светлее" и т. п...
Подобные задачи наиболее часто приходится решать HTML верстальщику при работе с текстом. Само собой разумеется, все эти задачи должны рещаться использованием стилей — хороший верстальщик будет использовать внешние стили прописанные в CSS файле, плохой - нагородит кучу inline стилей.

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

Кстати, в Microsoft Word, почему-то, используется прямо противоположный подход — там проще изменить атрибуты самого текста, чем стиля на котором этот текст основан. С каждой новой версией панель инструментов в этой программе увеличивается и увеличивается, вынуждая разработчиков придумывать все новые способы, чтобы уместить на экране все больше и больше кнопочек форматирования. Они даже изобрели новый вид меню, которое назвали "Меда-Лента" (правильно да?). Но с введением нового интерфейса дело еще более ухудшилось. Поэтому, редактирование документов в этом редакторе частенько вызывает приступ острой зубной боли у людей которым довелось поработать в профессиональных программах.

В это же самое время, профессиональные программы верстки часто вообще не имеют панелей инструментов освобождая освободившееся место под собственно документ. Например, интерфейс известного пакета QuarkXpress спроектирован таким образом, чтобы в нем практически невозможно было НЕ пользоваться стилями, тоесть нельзя было работать так как многие привыкли работать в Microsoft Word.

Каскадные таблицы стилей еще более удобны для форматирования текста чем стили текстовых редакторов, в них одному куску текста можно назначать одновременно несколько разных стилей. Одно время я так увлекся бестабличной версткой, что почти позабыл о основном назначении каскадных таблиц - форматировать текст.

На деле, для форматирования текстов нужно совсем немного стилей:

- стили для заголовков h1, h2, h3, h4
- стили для тегов форматирования: b, i, em
- стили для выделения теста цветом: .red, .blue, .gray, .green
- стили для эффектов форматирования: .bold, .italic, .higlight
- стили для выделения размером: .small, .big, .bigger, .smaller
- вспомогательные стили для форматирования: .left, .right, .center, .middle

Речь идет именно о стилях форматирования, стили текста по умолчанию для элеметов body table ul td и других я в этом посте не рассматриваю.
 
В принципе, этого набора стилей хватает чтобы получить большое количество различных текстовых стилей. Остальные эффекты можно получить комбинируя эти стили между собой.

Допустим, нам нужно сделать слово в тексте красным и полужирным:

Это <b class="red">слово</b> будет полужирным.

Или нам потребовался нестандартный заголовок H2 выровненный по правому краю и зеленого цвета:

<h2 class="right green">Заголовок H2</h2>

Конечно, указанный список стилей является неполным, каждый может дополнить его как желает нужным, но практика показывает — в большинстве случаев такого набора достаточно для решения большинства задач возникающих во время верстки.

У этого метода верстки есть один нюанс. Его можно применять только, если вы редактируете текст вручную, пользуясь текстовым редактором. К сожалению, я не видел еще не одного wysiwyg редактора, способного одновременно присвоить тексту несколько стилей. Если вы такие знаете подскажите.

 

Оставить комментарий