Pull to refresh

Comments 96

правда, мой ослик отчего-то сходит с ума…
а пока вы минусуете почем зря, мы с автором в личке выяснили, что происходило это по вине GA при включенном JS
Последнее время, когда то и дело появляются статьи типа «100% кросбраузерный метод на хтмл-цсс» у меня это почему-то ассоциируется с «Этот метод ну точно, на все 100% позволяет увеличить член на 10 см, это реально работает...» но всюду есть какой-то подвох. Тут, например, использование таблицы.
Ну так если нативной поддержки у IE6 нет, то без подвоха не обойтись ;) костыль — он и в Африке костыль
Интересно какой подвох при увеличении на 10см?
наверное увеличение идет внутрь…
UFO just landed and posted this here
#page {margin-left:auto; margin-right:auto; min-width:1000px; max-width:1240px;}

для Ie6 добавляю еще один див:

а в css только для ie6 прописываю:

#page {width:expression((document.compatMode && document.compatMode == 'CSS1Compat')? (document.documentElement.clientWidth > 1240? «1240px»: «auto»): (document.body.clientWidth > 1240? «1240px»: «auto»))}
.page_min {width:expression((document.compatMode && document.compatMode == 'CSS1Compat')? (document.documentElement.clientWidth < 1000? «1000px»: «auto»): (document.body.clientWidth < 1000? «1000px»: «auto»))}
Так многие делают. Суть метода из статьи — отсутствие expression.
Возможно многие скажут, что я не прав, но я напишу extension для ИЕ6, мало-по-малу он умирает, и не стоит он того, чтобы из-за него ухудшать семантику.
Воспользуйтесь conditional comment'ами, как я и написал — в итоге нет expression'ов, и семантике привет только в IE6, а в нормальных браузерах — неизбежный враппер, от которого все равно не избавиться.
UFO just landed and posted this here
Спасибо. Именно такой ход мысли мной и двигал.
Семантически верный код без грязных хаков и лишней разметки нужен не только для удовлетворения перфекционистов. Чистый и красивый код намного легче поддерживать и модифицировать. Даже самому разработчику, не говоря уж о тех, кто придёт за ним. Юзеру-то, конечно, плевать, можно вообще всё таблицами сверстать. Вот только потом будет очень тяжело что-то разобрать, поправить и не сломать при этом.
Не говорите ерунды. Поддерживать проще тот код, который написан по определённым правилам, «семантичность» и бестабличность тут никаким боком.
Ну так семантика и предполагает определённые правила — например, что заголовок — это 'h1', а не 'span class=«myheader»' или что меню — это список ссылок, а не три вложенные таблицы. Делай так — и ни у кого не возникнет вопросов. Какие ещё должны быть правила? Красивое форматирование, отсутствие ошибок?

А по поводу таблиц — посмотрите вот код khabkrai.ru/.
А меню это точно список ссылок? Вы уверены, что ul/li «семантичнее» таблицы в случае html-представления меню? Почему?

Более другие правила организации кода я описываю в клубе на Яру, это нечто бОльшее, чем «заголовок — это 'h1'»
UFO just landed and posted this here
А где в моем примере размер указан без CSS? Вы про суть метода? Там это специально прописано для лучшей демонстрации.
UFO just landed and posted this here
назовем это проще — «мне было лень внимательно изучить исходник»? :)
Написано же «Суть трюка» — «Суть», а не «Код»
css это если бы было написанно:
‹table›‹tr›‹td style=«width:1100px»›
‹div style=«width:900px»›

а такая конструкция это не css а не понятно что, которая даже валидность не пройдет (хоть и пользователям все равно на неё)
Вам, я смотрю, код примера тоже было лень посмотреть, как и товарищу ni_x. Так вообще нет инлайнового CSS относящегося непосредственно к обвязке, а сам код валиден, для чего там добавлена ссылка.
много человек сидя в инете делает ресайз страниц, что бы посмотреть как сайт будет смотреться в меньшем окне :)?

по моему таким страдают только верстальщики и то когда тестят свои сайты… остальным пользователям это не надо. Они залезли посмотрели что надо и ушли!
минусы ставят а объяснить никто не может :) это о многом говорит! минусы вперед!
Вам же объяснили, что будет тормозить. Даже однократный ресайз.

На каких машинах обычно стоит IE6 — на не самых новых офисных компьютерах low-end категории, в лучшем случае на чем-то среднем. Они обычно и так тормозят, поэтому в определенных условиях, если растяг сложный и комплексный, или просто обилие другого JS на странице, такая операция, как растягивание страницы или апдейт контента, от которого сработает expression, будет вызывать лишнюю загрузку (дада, он сработает не только от растяга). Если Вы разрабатываете серьезный крупный сайт — Вы обязаны об этом помнить.

Вообще так в любом вопросе — если есть способ без тяжелой нагрузки обойтись, то надо обходиться.
ничего от такого экспрешна тормозить не будет, особенно учитывая, что body || documentElement зависит от доктайпа и (на продакшне) можно дополнительно сократить условие.
UFO just landed and posted this here
Только тем, что в нем есть вставки на JS, а цель данной статьи избавиться от скриптов.
UFO just landed and posted this here
Если бы… процент рынка говорит об обратном…

Лично я бы с радостью в первых же рядах про него забыл как про страшный сон.
ага, смотрим на статистику использования — www.w3schools.com/browsers/browsers_stats.asp
доля ИЕ6 — 13,6%. меньше чем FF, но зато дальше по табличке — Опера 2,2%, Сафари 3,3%, Хром — 7%. Оперу никто не использует? перестаем равняться на Хром? ИЕ6 мертв? ну-ну
вы ещё взяли специфичный сайт, которым пользуются, по сути, гики — программисты и верстальщики.
думаю, статистика на одноглазнеках, фконтактах, майспейсах и фэйсбуках выглядит несколько иначе :)
Вы бы глянули откуда статистика берется эта прежде чем такие комментарии оставлять.
Отвечу за автора комментария строчками под таблицей по ссылке www.w3schools.com/browsers/browsers_stats.asp

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

Anyway, our data, collected from W3Schools' log-files, over a five year period, clearly shows the long and medium-term trends.
UFO just landed and posted this here
Насчет цифр — это к хозяевам сайта, а что касается убийства IE6 — есть факторы, которые мы с Вами убить не в состоянии, поэтому придется поддерживать. Я про корпоративный сектор и про принципиально не обновляемый Win2000, к примеру.

Плюс не знаю как остальных, а меня очень воодушевляет мысль, что очередной сайт сдан полностью кроссбраузерным и я снова победил IE. Это так, для себя…
UFO just landed and posted this here
www.liveinternet.ru/stat/ru/browsers.html?period=month

IE6 еще жив-живёхонёк! Еще несколько лет он точно будет актуальный, пока не уйдут в утиль оставшиеся компьютеры с WinXP в быту и разных конторах.
Про Win2000 не забывайте… там 7й вообще не поставить никак…
Либо я недопонимаю что-то, либо в на маке (сафари, фф, хром) этот трюк не работает
Вы недопонимаете. Простите. Ваши браузеры поддерживают min- и max-width, а этот костыль только для IE6 и ниже.

По теме — для меня уж лучше expression и условные комментарии, чем это! Что я везде и использую, хотя-бы ради того, что не использую таблиц для позиционирования и не собираюсь замусоривать шаблоны такими трюками.

Насчет валидности и семантики, согласен, что юзеру плевать. Но я делаю семантический шаблон для себя, что-бы было удобнее развивать проект и не копаться в той куче мусора, в которую превратиться шаблон после пары десятков изменений в течении жизни сайта. Чем аккуратнее и правильнее делать шаблон, тем проще и приятнее будет к нему вернуться через неопределённое время, когда понадобится.
Да нет, решение-то кроссбраузерное… просто человек похоже недопонимает, что вообще происходит, т.к. сейчас проверял на маке под всеми браузерами — все ок.
UFO just landed and posted this here
Да вроде написал

‹div width=900› — минимальная ширина
UFO just landed and posted this here
В принципе, чем не решение. Пока ИЕ6 не умер, все равно костыли нужны. А так, таблицу убираем в CC и имеем обычный код для всех браузеров и чуть громоздкий, но рабочий для ИЕ6.
кто-то любит table'ы… Кто-то div'ы… Этот способ должен всех помирить :)
Добавил версию с conditional comment'ом — для тех, кто таблицы не любит )))
Таблица — для табличного представления данных, но не для вёрстки страницы!
UFO just landed and posted this here
Какая безапелляционность ;)
> для табличного _представления_ данных

xD
приплыли… и что, действительно, по вашему скромному, это такой супер-пупер новый метод?
кста, уж раз браться за олд-скульные методы, то и про table-layout (который fixed) надо было бы черкануть.
Метод как метод. Не супер и не пупер, но везде и шустро работает, и не требует скриптов.

А про table-layout: fixed — черканите, раз знаете.
«Кроссбраузерный min- и max-width на чистом HTML+CSS» слишком амбициозно звучит, чтобы автора дополнять, а кому надо — тот знает. точнее, помнит.

а с экспрешном в три действия, который min/max регулирует, думаете, будут жуткие подвисания с тормозами? в чем выигрыш-то, кроме как возможность делать min/max без мини-минимальнейших знаний о dom'е? только, плиз, не надо о ie6-пользователях без js: они js отключить могли специально для того, чтобы сайтики на все окошко тянулись ;)
Так Вы «черканите», что воду-то лить ;) амбициозно-не амбициозно, я разве соврал где-то? В способе что-либо иное используется? Где-то не работает?
таблички показываются только тогда, когда целиком загружены (в ие6 точно), т.к. в table-layout по умолчанию значится auto (даже если width проставить всем ячейкам первой строчки), а при fixed — контент показывается в процессе загрузки таблицы. так-то.

// а в гугле такого не написано?
Спасибо, К.О., при auto — анализируется вся таблица и размеры ячеек проставляются с учетом всего контента, при fixed — размер считается по тегам COL и контент может «вылетать» за пределы ячеек или ими обрезаться.

Теперь скажите, каким образом это относится к предмету статьи, а именно к min-width и max-width?
диалог, как в сказке: чем дальше — тем страшнее. но все предсказуемо.

ощутив нехватку знаний, вы полезли-таки в гугль. респект. но есть пара ньюансов: 1) вычитали не все и, соотв., 2) не смогли понять, зачем я написал первый коммент. // гугль, он такой, все ответы знает, только лениться не надо

чтобы добиться нормального блочного поведения (всегда пожалуйста, ваш КО), надо врубить fixed, а когда врубится fixed… // нет, действительно, в думалке ничего по этому поводу не созрело?

но это проза. подумав, получаем или еще один (sic!) tr (и, да, в ие6 не заработает), или недостраничку.
Какова ценность того, что Вы описываете, если «получаем или еще один (sic!) tr (и, да, в ие6 не заработает), или недостраничку», особенно в части «в ие6 не заработает»?

К чему весь сарказм? Поведение table-layout разбиралось задолго до этого диалога, оно описано в стандарте www.w3.org/TR/CSS2/tables.html#width-layout — гугл тут не при чем, все ответы есть в доке.
не похоже, чтобы «fixed разбирался», т.к. «считается по тегам COL».

так и думал, что спека сейчас будет, но практику тоже надо смотреть и обдумывать. дело в том (повторюсь), что табличка в ие6 по мере загрузки (как дивы) отображаться не будет. повторюсь, не будет. это очень большой минус, переводящий решение в ранг неполноценного.

без fixed — неполноценность в ие6 (и, думаю, не только в ие6), а с ним — не работает. только это упорно игнорируется. вот к чему весь сарказм.

«получаем» это не «у меню не срастается», а «у вас выходит». просто я объясняю (к сожалению, долго и упорно) почему решение мертворожденное, а вы ценность какую-то ищете…

PS я не злой, просто однобоких недорешений не люблю, особенно, когда они отстаиваются на пустых аргументах. «нет экспрешнов» — это действительно такой уж плюс по сравнению с табличкой? табличка в лаёуте — действительно только дело вкуса?
Из каких же далей Вы начали…

Да, я согласен, что постепенной загрузки не будет, в отличие от. Решение, слава богу, в случае CC подключается только у IE6, и мне кажется, что секунда другая полной загрузки HTML в данном случае не самый большой минус, повторюсь, только в IE6. Я не вижу критической неполноценности, оттого, что один дремучий браузер будет рендерить чуть дольше, это же костыль… Тот же гугл или яндекс получит нормальный враппер DIVом, без таблиц в лэйауте.

Что касается «не похоже, чтобы „fixed разбирался“, т.к. „считается по тегам COL“» — ну не буду же я приводить все параграфы спеки, касающиеся расчета ширины элементов, это вопрос не на один комментарий ;) зачем уж так то к словам придираться. Я подразумевал, что если есть эти теги, то выполняется

да я не придираюсь, мне мой первый коммент показался самодостаточным (видимо, рабочая привычка).

кондишны… ну это как сказать, боремся-то мы с браузером и не хотим, чтобы пользователю из-за наших верстальщицких трюков хоть чуть-чуть хуже было. а тут секунда ради «без экспрешнов» — не думаю, что это логично. секунда-то она секундой, а когда пол-минуты?
Что касается экспрешна — в данном случае он каждый раз будет выполняться при ресайзе и не только. Я выше написал, почему это может быть плохо. Я не говорю, что он будет сильно тормозить, но зачастую это бывает заметно. Нет, я не противник экспрешнов, но хорошо, когда хотя бы есть альтернативы.
хабр сам за меня комментарий отправил… Я подразумевал, что если есть эти теги, то выполняется

A column element with a value other than 'auto' for the 'width' property sets the width for that column.

Что достаточно для задания.
… табличка в ие6 по мере загрузки (как дивы) отображаться не будет ...
именно. И даже хуже — IE6 не будет отображать содержимое пока не загрузятся и все img/ внутри. А это уже аэсдец. Хотя, я сторонник «забить» на юзеров IE6, все равно они ничерта не соображают в интернете и сайтах.
а т.к. «забить» веселей и проще — то expression тут в самый раз. Не нада никакого td.
Размер изображения содержится обычно в начале файла (у JPEG к примеру), поэтому качать весь файл для определения не требуется. Это конечно не сильно меняет дело, но всеже…
Честно сказать, в обсуждении столько много экспрессии, что читать, к сожалению, неприятно…

До сих пор удивляюсь тому количеству трюков, которое до сих пор необходимо выдумывать и использовать для поддержки сами знаете какого ПО… Пора забивать на его пользователей. Так и сам делаю.
>пора забивать на его пользователей. Так и сам делаю.
Делать можно что угодно, но зачем других глупостям учить?
IE6 = 15% в рунете по LI.Ru Почти как у Оперы9 и больше чем у Хрома с Сафари
Если продолжать дуть в одно место тем самым 15% пользователям, вместо того, чтобы подтолкнуть и научить пользоваться новым браузером, что активно делает Яндекс, то эти 15% так и будут убывать еще 15 лет. Инерционность мышления такого рода пользователей также заставляет задуматься о том. какая с них может быть денежная конверсия и т.д. И еще раз выскажу лично мое мнение — мне абсолютно по барабану, как выглядит мой сайт у завхоза Тамары Петровны, я даже буду рад, если он у нее будет выглядеть постольку-поскольку.
А если таких юзеров пол-конторы, а обновиться они не могут из-за политик безопасности или Win2000? Поверьте, таких много…
1. Я не зря упомянул про конверсию с таких пользователей
2. Никто не запрещает им пользоваться этим сайтом из дома, а с работы наоборот — скорее всего, запрещают
3. Portable soft никто не отменял — однажды персонал одной такой конторы был готов в ноги кланяться, когда я им показал что такое opera с флэшки :)
4. Грамотно мыслящих админов намного больше, чем таких, которые устраивают ситуации, описанные вами, такой случай все-таки довольно редкое исключение.
«в ноги кланяться, когда я им» и неподдержка 15% пользователей очень взаимосвязанные вещи.
Вам бы в ЖЭКе работать. Это их советско-кондовый подход.
</offtop>

А что делать…
какая прелесть!
надо по-быстрому обвязочку на жквери нарисовать…

вопрос: внешняя — только таблица? два дива не сработают?
Нет, DIV не пойдет — т.к. он будет как распорка себя вести.
надо по-быстрому обвязочку на жквери нарисовать…


Прочитайте еще три раза топик. Смысл хака — в отсутствии скриптов.
ой, да почитайте сами
> Давно хотел поделиться одной интересной наработкой — а именно эмуляцией свойств min и max-width без использования expression и подобных вещей.
экспрешн — это жаваскрипт в цсс от мс.

вы ведь наверняка используете жквери для рисования круглых углов и сортировки таблиц?
вот а мне хочется для эмуляции *-width через приведённую наработку
А почему было просто не повесть функцию на событие onresize?
Это был бы JS, данный пример демонстрирует обвязку без JS.
Ну всё же у вас оберткой выступает таблица. Т.е. если пользователь вставит на сайт картинку размером 1200х1200, то таблица растянется. Ну и длинныедлинныедлинные строчки тоже «разопрут» ее. И, кстати, почему table? Почему не div заданной ширины? Не вижу принципиальной разницы, просветите.
Как обработать некорректный контент — задача актуальная для любой верстки, не только для таблиц. Т.к. вывалившийся из контейнера image на пол-экрана, развалить может что угодно, если это не предусматривать.

Div вел бы себя как распорка, в данном случае даже если на table повесить ширину, то эффект пропадает. Если вкратце — эффект связан с особенностями расчета ширины таблиц и ячеек.
я шоке…
я устанавливал минимальную/максимальную ширину/высоту таблицами и распорками в 2001-2003 годах, когда не знал цсс. а это оказывается кросбраузерный бла бла бла на чистом хтмл+цсс
%/
иными словами, ради реализации одного эффекта для одного браузера городить не только вложенные лишние теги, но еще и оборачивать все таблицей(!) это жжжесть. и особенный цимус это доставит тем, кто будет переписывать шаблоны.
UFO just landed and posted this here
UFO just landed and posted this here
Only those users with full accounts are able to leave comments. Log in, please.

Articles