• Домашка №2: результаты

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

    Результат домашки состоит из двух частей, вторую размещу завтра/послезавтра.

    Ante

    http://stanut.by/_/dz02/quad/ — 5 элементов, 1 спрайт, 1 expression для IE6

    Хорошее решение, однако без одного expression не обошлось. Хоть он и кэширующий, даже простое обращение к свойствам DOM-элемента обходится довольно дорого.

    Степан Резников

    http://stepan-reznikov.appspot.com/static/homework2-decor/index.html — 10 элементов, 1 спрайт

    Решение получилось совсем без хаков для IE6 (фильтр AlphaImageLoader не считается), но смущает количество декоративных элементов — целых 10 штук.

    daer

    http://chikuyonok.ru/u/hw2/daer/templates/round.html — 8 элементов, 2 спрайта, DD_belatedPNG для IE6, не зависит от высоты контента

    Чем-то похоже на решение Стёпы, только элементов 8, а не 10, и используется два спрайта вместо одного. Однако это решение не ограничено по высоте, что является плюсом. Очень некрасиво моргает при ресайзе в IE6, требует много времени на инициализацию из-за DD_belatedPNG.

    GreLI

    http://chikuyonok.ru/u/hw2/greli/homework2.html — 6 элементов, 1 спрайт, очень много исправлений для IE

    Решение, в целом, неплохое, но очень сильно смущает обилие исправлений для IE — то, чего изначально нужно было избежать. Поддерживать такой код довольно сложно и трудоёмко. Однако решение интересно прежде всего тем, что GreLI виртуозно воспользовался багом IE для достижения необходимого результата:

    В моём примере кстати вообще нет overflow. Для обрезания в IE6 используется то, что за пределами элемента с hasLayout отображаются только блоки с position:relative. Ну или абсолютно позиционированные. Декоративные же либо позиционируются абсолютно с клипингом, либо проставлен position:static. Такое вот полезное применение бага.

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

    kizu

    http://test.kizu.ru/crnrz/var-1001.html — 6 элементов, 1 спрайт, много исправлений для IE
    http://test.kizu.ru/crnrz/var-2002.html — 7 элементов, 1 спрайт, 1 expression для IE, много исправлений для IE, не зависит от высоты контента

    Скептически настроенный kizu прислал целых два очень неплохих варианта, один из которых не зависит от высоты контента, что обошлось ему в один дополнительный элемент и expression для IE. Ну а само решение грешит теми же проблемами, что и у GreLI: большое количество исправлений для IE.

    frozenbear

    http://epoint-group.ru/css-work/round-corners/ и http://epoint-group.ru/css-work/round-corners-v2/ — 4 элемента, 1 спрайт, очень тяжеловесное решение для IE6, проблемы в Opera 10

    Рекордсменом по экономии декоративных элементов стал frozenbear: его решение использует всего 4 элемента. Что вышло боком для IE6: мой бедный ослик сначала долго думал, открывать ли ему эту страницу, а после 2—3 минут раздумий таки очухался и показал решение во всей красе. А все из-за специального скрипта, который генерирует кучу блоков с фильтрами, тем самым сильно нагружая IE6. Кроме того, есть проблемы в браузере Opera с отображением инлайнового блока. Вывод: для Opera верстать сложнее, чем для IE6 🙂

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

    Anton Poleshchuk

    http://chikuyonok.ru/u/hw2/ap/ — 6/5 элементов, 1 спрайт

    Очень хорошее решение: минимум исправлений для IE6 (вместо height: 1%; можно было бы написать zoom: 1 в основном CSS), нет expressions. Практически полностью повторяет моё решение 🙂

    Vii

    http://chikuyonok.ru/u/hw2/vii/ — 5 элементов, 1 спрайт

    Решение очень хорошее, особенно понравилось то, что декоративные элементы находятся рядом, а не разбросаны по всему блоку. Но маленький недостаток всё-таки есть: это необходимость указать отдельно для IE6 свойство clip.

    Revers

    http://rg-jam.ru/revers/block_shadow.html — 5 элементов, 1 спрайт, проблемы в Opera

    Тут особо нечего сказать: минимум элементов, минимум правок для IE6. Очень хорошее решение. Но есть проблемы в Opera при отображении инлайнового блока.

    Владислав Трушин

    http://chikuyonok.ru/u/hw2/sloter/ — 7 элементов, 1 спрайт, тяжелое решение для IE6 (VML, expression)

    Для IE6 решение получилось чересчур громоздким: некэшируемые expressions для размеров блока, VML для отрисовки PNG. Всё это отрицательно сказывается на производительности.

    Олег Коровин

    http://olegkorovin.spb.ru/magicframe/ — 6 элементов, 1 спрайт

    В сравнении с другими решениями, у Олега для декоративных элементов не используется position: absolute. У этих блоков относительное позиционирование, а нужного расположения блоков Олег добивается с помощью отрицательных марджинов. Довольно интересный подход, стоит обратить на него внимание.

    Только в IE6 все довольно плохо: при ресайзе окна начинают пропадать блоки, не работает инлайн.


    На этот раз домашка получилась именно такой, какой задумывалась изначально, а именно: обмен опытом при решении одной и той же задачи разными людьми. Лично я уже взял на вооружение некоторые приёмы, предложенные читателями. Большинство работ я комментировал очень кратко — всё потому, что у них используется одна и та же идея для организации элементов и спрайта, подробное описание которой — в следующем посте.

  • 13 комментариев

    1. GreLI
      20 октября 2009

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

      Я решал прежде всего задачу рисования блока с шириной, зависящей от содержимого, в IE6, поэтому так много стилей для IE. До реализации вопроса я вообще думал, что это невозможно без таблиц (как и другие, например pepelsbey).

      А рисовать такие же большие элементы (хотя для примера был перебор, конечно), большая часть которых скрыта, в других браузерах не хочется, поэтому пользуюсь работающим в них полноценным позиционированием. Объединил стили как мог, но да, большая часть для IE6 осталась, как и некоторые необходимые вычисления. Упростить задачу можно добавив элементов (рисуя по отдельности левую и нижнюю стороны и уголок), а усложнив — наоборот, снизить их число :-).

    2. 20 октября 2009

      Забыл своё решение приложить и описать 😉

    3. 20 октября 2009

      Я имел ввиду что Сергей забыл именно своё решение 😉

    4. Сергей Чикуенок
      20 октября 2009

      Моё решение будет в следующей статье

    5. 20 октября 2009

      Дык чо, кто финалист-то?

    6. GreLI
      20 октября 2009

      Победила дружба.

    7. 10 ноября 2009

      Наткнулся на неожиданный баг, который так и не смог победить.

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

      Необычность в том, что когда в Developer Tool начинаешь в реальном времени исправлять свойства, то абсолютно любое изменение сразу же заставляет эти углы принять нужные размеры.

      Фиксировать размеры этого блока нельзя, т.к. его содержимое может меняться динамически.

      Есть идеи как можно исправить это?

    8. Дима
      14 ноября 2009

      Склоняюсь перед гуру. Дня 4 сидел, решал подобную задачу. Только она казалась мне сложнее той, что описана.

      Вот такую рамку надо было сделать: http://i.piccy.info/i4/6e/73/fa51f1d710ec258edc045668b640.png

      Взял после 4-х дней решение Ante, чуток подправил и всё заработало. Благодарен этому блогу и его участникам и за решение и за урок, из которого я понял, что мал ещё. Спасибо.

    9. Дима
      14 ноября 2009

      Кстати, если у Анте добавить блок .bg { left: 0; top: 0; position: absolute; width: 100%; height: 100%; overflow: hidden; } и на него перенести хак для ИЕ6, то ИЕ будет считать размеры на 1 блок раз вместо 4-х углов.

    10. Андрей
      17 ноября 2009

      Здравствуйте! Пытался использовать ваше решение, однако при вставке его в таблицу в IE7 оно переставало работать (на удивление в IE6 все работало).
      А вот решение Олега Коровина, заработало сразу же.
      Спасибо и ему и вам!

    11. GreLI
      21 ноября 2009

      Если считать как в следующей статье, то у меня пять элементов :-).

    12. 25 ноября 2009

      Непростая задачка. дайте списать.

    13. unclechu
      2 апреля 2010

      «(вместо height: 1%; можно было бы написать zoom: 1 в основном CSS)»
      zoom: 1; — нельзя писать, не валидно!