Comments 71
Знаете, возможно, это покажется вам странным, но я очень рад, что все, что тут написано, вам не в новинку.
Старался перевести как можно лучше. Но… может быть тут моя вина. Извините, если что не так.
В принципе — ничего сложно. Собственно, все сводится к пониманию того, что такое em. Зато с примерами и по полочкам.
Дело не в переводе… Пугают формулы… наверное…
Но на сколько я знаю, у буржуев сайты модно делать фиксированной шириной.
А у нас заказчики любят заказывать на весь экран. При чём никто из них не может обычно предоставить контент приличный… И получаются пара строк вверху экрана на всю ширину… И картинка подвешенная в пустоте…
Что в очередной раз доказывает, что max width имеет право на жизнь.
В относительных ли она единицах или нет.
А как по мне, так образцовая статья! Замечательно все расписано, последовательно и хорошо, с примерами, с пояснениями, просто замечательно!
В избранное, однозначно.
UFO landed and left these words here
Ну, по сравнению с ieee'шными статейками, например — все просто, понятно и без утайки.
Расписали хоть какой то момент толково — и то хорошо.
UFO landed and left these words here
но написать что-то ведь надо, иначе как напомнить о себе?
А могли бы и поблагодарить за грамотную статью, которых на русском языке вы вряд ли видели…
UFO landed and left these words here
нечитабельно %(
увы всем
статья хорошая, но в этом переводе на русском читается трудно, жаль
Логотип это тег:
Unstoppable Robot Ninja
На нем стиль:
max-width:100%;
При уменьшении размера контейнера уменьшается ширина изображения.
Кажется так.
Спасибо, теперь догнал, получается, что ресайз изображения происходит за счет браузера отталкиваясь от max-width:100%? Хм… здорово.

Решил изучить верстку его блога, и никак не догоню зачем нужна такая вложенность в шапке, вернее понимать понимаю, но зачем так мусорить:

-cite
---strong
------b
---------img
На самом деле статья действительно «переизложенная» на мой взгляд. Я её тоже хотел было перевести, но что-то не сложилось (и слава богу, а то бы вдвоём перевели :) ). Если к статье применить мудрое правило «выброси половину слов» — информационная ценность совершенно не изменится. Не знаю как у буржуев, но у нас многие привыкли суть улавливать на лету, читая по диагонали даже иноязычные тексты, не то что наши родные. Поэтому чем больше воды — тем более усложняется восприятие.

К переводчику тут никаких претензий — он молодец, что всё это осилил и перевел. Но есть пожелание на будущее — не надо боятся перевод «адаптировать» — можно и нужно смело резать ненужное, перефразировать по своему и т.п. Правда, адаптированный перевод часто оказывается сложнее дословного.

Спасибо за труд, с интересом перечитал еще раз ;)

Пожалуйста. Рад, что он может быть полезен.

Правда считаю, что перевод должен быть близок к тексту, по возможности.
Иначе это уже не перевод, а реферат.
Естественно, рефераты имеют право на жизнь и, иногда, намного полезнее переводов.
Но все-таки это — перевод.

А что касается того, что у нас все схватывают на лету — это очень индивидуально.
Мне, иногда, очень не хватает статей, в которых все разложено по полочкам и проиллюстрировано пошагово комментированными примерами.
К сожалению, лентяям не нравится читать много непонятного текста. Им нравится бездумно копировать код и не вникать «для чего и почему надо сделать именно так и никак иначе». Мне понравилась статья. Спасибо за немалый труд!
Хорошая статья, но читал фрагментами. Сократить бы, как уже выше говорилось)
не по теме: прочитав только над хабракатом — глаза заболели от ряби. к чему столько ссылок? вот к чему, ответьте?
Это перевод. Ссылки были там, где их использовал автор.
Он, похоже, хотел проииллюстрировать фреймворки и инструментарий работы с ними, потому что фреймворки, по его мнению, облегчают работу с сеткой (я не люблю CSS фреймворки и не согласен), упомянул людей, которые обладают значением в области использования типографской сетки в вебе, да пару тематических статеек привел.
Не особенно лишняя информация. Мне пройтись по этим ссылкам было интересно.
Мне в этом смысле стало интересно зачем вы HTML-разметку нашпиговали ссылками, а особенно — зачем ссылки в закрытывающих тэгах? Этих ссылок уж точно нет в оригинале, предполагается, что читатели хотя бы начального уровня, а не нулевого :)
Эм, единственные ссылки, которых нету в оригинальном тексте:
1. ссылка на мой профиль, в соответствующем разделе.
2. ссылки которые добавил «code hightlighter». Правда в данном случае я выбрал его не совсем удачно — что то он толком ничего не подсвечивает. Может перебрать статью и код обработать другим hightlighter'ом? Как вы думаете?

/me в задумчивости.
Думаю не стоит — код в статье достаточно прост и понятен и без подсветки.
А чем пользовались для подсветки кода, интересно? Он что — сам ссылки расставляет на справочник по тэгам?
(кстати на хабре вроде как принято ставить ссылку на то, чем раскрашивали, да и автору использованного сервиса таким образом стоит сказать спасибо, если конечно это не ваша собственная разработка)
Попробовал quickhighlighter.com/
Хабр его стили порезал.
В html'ке он смотрелся нормально.
Да, он сам расставляет ссылки.
Я к этому непричастен.

По поводу ссылок — не знал. Исправлюсь.
O CSS — почему бы не делать отступы, в нём согласно включаемости элементов в самом документе? Так будет понятно без просмотра остального кода, для чего куда float происходит.
Это я смотря на последний исходный код подумал, что в CSS только один отступ используется (для параметров), а если использовать отступы кода как в самом HTML, то будет видно, что в каком контейнере находится, ведь отсчёт размеров ведётся как раз относительный.
Да, но в обычных правилах (сайта, заведения и т.п.) при сложной структуре делают нумерацию не одноуровневым списком, а с подпунктами. Так и тут через только лишь отступы можно показать, из каких предыдущих правил наследуются параметры, а с какими пересекаются.
А где можно увидеть пример такого чуда?
Поделитесь, пожалуйста.
Я, просто, пока не очень понимаю, как это должно выглядеть.
Да тоже вот спать собирался, но тег за тег, и так всю статью с примерами дочитал и засмотрел, затянуло =)
не, это фиговая резина ;-) при низких разрешениях ширины колонок должны исходить не из эталонных соотношений, а от объёма контента. именно так ведут себя таблицы — изменяют ширины колонок, чтобы контент не обрезался.
Гм. min width, max width дейсствительно бы не помешали.
Что касается фразы «что бы контент не обрезался»— было бы здорово, если бы вы ее прокомментировали.
Что значит «обрезался» и как это определить из CSS?
Тоесть надо, что бы нарушалось соотношение ширины колонок в зависимости от того есть ли там информационное наполнение? А как же типографская сетка? Она улучшает читабельность…
если там длинное слово или большая картинка, то сетка идёт лесом =)
тут есть три стратегии: обрезать всё, что не влезает в колонку, допускать вылезание контента в соседнюю колонку и увеличивать ширину колонки.
1. Или снова вспомнить про «маленькую ложь» и все таки определить минимальную и, возможно, максимальную ширину.
2. Картинки тоже можно масштабировать. Смотри статейки на сайте робота-ниндзя :)
3. Что за слово такое, которое может разбить сетку!?

В статье рассмотрен тривиальный случай, в котором, просто показан и расписан «от» и «до» принцип работы с относительными единицами измерения. В послесловии написано, что масса проблем не освещена. И приведены материалы для дополнительного чтения.
1. тогда смысл статьи теряется. не правда ли? %-)
2. без привлечения яваскрипта — нельзя. попробуй пропиши картинке ширину и высоту, а потом задай wax-width. это касательно контентных картинок. ещё есть кнопки там всякие, селекты и прочие контролы, которые тоже не умеют масштабироваться, да и в общем-то не должны…
3. ru.wikipedia.org/wiki/%D0%A1%D0%B0%D0%BC%D0%BE%D0%B5_%D0%B4%D0%BB%D0%B8%D0%BD%D0%BD%D0%BE%D0%B5_%D1%81%D0%BB%D0%BE%D0%B2%D0%BE_%D1%80%D1%83%D1%81%D1%81%D0%BA%D0%BE%D0%B3%D0%BE_%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0

убейте меня. я не хочу редактировать вёрстку, где всё задано в относительных единицах. это ж убиться можно — вручную пересчитывать все эти формулы и постоянно огребать проблемы при перетасовке элементов.
1. Не правда. «Резина» остается. Но всегда надо исходить из здравого смысла.
2. Почитай статью, о которой говорил. И сам сайт посмотри.
3. Не хочешь — не редактируй. Но ты забоишься о том, что бы не переработать, не дай бог, а не о том, что бы верстка была хорошей.
>попробуй пропиши картинке ширину и высоту, а потом задай wax-width.
Хоть убейте, не могу понять зачем кому то может понадобится определять размер картинки, представленной тегом img, в абсолютных величинах.

Нет, правда, почитайте статейки на сайте робота ниндзя и доолнительное чтиво.
Для очень многих проблем там предложено решение.

И, кстати, использование js не является смертным грехом.
Особенно если нормально реализована «graceful degradation» странички.
мдя, нахватался умных слов, а азов не знаешь… габариты обектов нужно указывать, чтобы контент не скакал по мере загрузки страницы.
Спасибо за ликбез.
Про скачущий контент я никогда не думал.
Но даже если так: габариты объекта, который должен изменять размер, не обязательно должны быть указаны в абсолютных единицах.
я тебе щас врежу бля!
em — при изменении размера шрифта картинка тоже начнёт деформироваться.
pt — те же пиксели, но другой формы.
хера о_0 шо это было?

% — не помогут для задания высоты картинки.
tenshi не нервничай.
Как только освобожусь — поэксперементирую.
И либо соглашусь либо нет.
А то что то потеряна конструктивная искра.

Про pt — никогда их не испльзовал, если честно. Посмотрел в спецификации. Ты прав, а я — нет.
UFO landed and left these words here
ALA пишут хорошие вещи, теперь не могу определиться, на каком языке читать было проще и интереснее, автору перевода большое спасибо
1) Не обращайте внимания на такие вещи, идиотов на хабре полно, просто в силу IT-направленности ресурса, процент идиотизма немного ниже, чем везде.

2) Забейте на комментарии типа «Боян», «Это мы уже видели» и прочее гумно — да, они это видели, ну и что? Это считанные единицы, которые все знают, и все умеют. Подумайте об остальных 99% верстальщиков, особенно начинающих, которых уже сейчас можно пойти и потыкать мордой в вашу статью, чтобы хоть немного повысили свой уровень, без тупых оправданий «я низнаю онглиске!»
Для начинающих — самое то. Одно время долго не мог вкурить как высчитывать em
Куда-то часть материала пропала, в конце в районе дополнительной литературы.

А статья вполне себе жизнеспособна и читабельна, не верьте завистникам :) Удачи
UFO landed and left these words here
всё бы хорошо, по сталкивалась с тем, что опера округляет проценты, то биш берёт только целую часть. потому предполагаю, что сетка может поехать, если все ширины указывать в процентах
хм, хотя туплю, если всё-всё будет резиновое, то и нормально получится)))
Only those users with full accounts are able to leave comments. Log in, please.