00:00 Интро 01:27 Описание задачи 02:53 Интересная разметка 04:49 Таблица, серьёзно? 06:23 Мелочь в ячейках 07:13 Дебажим как в старину 08:33 Структура компонента 10:13 Необходимая графика 11:05 Жизнь без border-radius 12:28 Интересное в стилях 13:05 Правки для IE 14:15 JS в CSS 15:37 Починка прозрачности 17:11 Всё делали правильно 18:49 Выводы 20:04 Аутро

ждем верстку 2020

What We Do without Box Shadow Жанр: комедия, ужасы Год выпуска: 2008

@pepelsbey

3 жыл бұрын

В 2008 году это было вполне романтической комедией, а вот в 2020 году уже ближе к ужасам, да.

Мне до сих пор снятся флешбэки о необходимости поддержки ie6, аж всплакнул.

Раньше писали js in css, а теперь css in js. Ирония судьбы. :D

Так же делались и кнопки. Особенно когда в тренде были градиентные кнопки (выпуклые или вогнутые). Береш левый кусочек, правый кусочек и repeat центра. И ещё такой же набор картинок для ховера))) УХХХ!!! Сказка!

«одна компания», использующая бэм в 2008 👌

Понять как оно было: сверстать письмо для рассылки :) (там и без гридов, и без флексов, на таблицах)

Эх вспомнил молодость и таблицы! (Есть в архиве пару сайтов на таблицах и флоатах)! Спасибо за видео.

На волне ностальгии бахну себе футболку с zoom: 1

Раньше писали хаки для IE, zoom: 1, теперь пишем хаки для Сафари -webkit-transform: translate3d(0, 0, 0) Ничего не меняется :)

То самое чувство, когда верстаешь под аутлук...

@user-up5py6rc1s

3 жыл бұрын

это боль)

@thefullstackwizard

3 жыл бұрын

Только что с этим столкнулся. Плакал.

@greenders87

3 жыл бұрын

Всё так, буквально пару дней назад страдал...

Стоит также упомянуть PIE.htc который на чём-то малоизвестном и магическом (js-вставкой которая подключалась как картинка в цсс) делал магию с браузерами ие добавляя им скруглённые углы, градиенты и другие на то время крутые цсс-штуки)

Пустил скупую олдфажную слезу. Душевно :)

Блиииин, как же жалко, что ты не запустил это в IE6@Windows XP через VirtualBox... Заодно бы обсудили интерфейс самого браузера :)

@pepelsbey

3 жыл бұрын

Мне как раз было интереснее посмотреть, как это работает в современных браузерах. То, что оно хорошо работает в IE6 - это понятно :D Но спасибо за идею, можно будет открыть современную реализацию в IE6 и посмеяться.

Эх, ностальгия) Начал верстать только с ie6, там для скругленных уголков использовал ещё css3pie, но это уже чуть позже было, видимо :)

Отличный контент! Спасибо, прослезился ;-)

Моя первая студ. лаба была ещё на таблицах... Цунами из повсеместных гаджетов и соцсетей появилось на горизонте... Разметочно-стилевая революция не за горами... И это всего-то 12 лет назад. Спасибо, познавательно.

В тe времена я и узнал про pepelsbey

Отличный экскурс в 2008й👍🏻 Эх, я еще тогда не представляла, что когда-нибудь буду изучать верстку и работать в IT) И, конечно, для меня открытие, как верстали в 2008м

А я думал, что я страдал в 2011 году)

Прекрасно помню эти времена) Тогда еще фреймы казались чем-то невероятным и крутым

@w999d

3 жыл бұрын

когда-то div и layer казались чем-то заумным

@ManyakNag

3 жыл бұрын

О, фреймы :)

Надо было еще показать как в фотошопе нарезку делать, без этого не свертаешь.

@mikepolo6734

3 жыл бұрын

Так вот же. Даже автор тот же kzread.info/dash/bejne/a6CurNinetO-fJs.html ;)

@Andreykch

3 жыл бұрын

@@mikepolo6734 Ох ничего себе какое ретро. И эта модная длинная причёска)

@AldabaranChannel

3 жыл бұрын

Ты имеешь в виду в Paint?

С нетерпением жду продолжения!

Смешанные чувства, с одной стороны тогда был мерзкий IE, а с другой - было тепло и лампово. Ну ка, признавайтесь, кто делал "снежинки" на js и бегущий текст в статусной строке IE? :-)

@pepelsbey

3 жыл бұрын

И муравьёв пускали. Всё было, ох.

@springvoice9138

2 жыл бұрын

Я сначала их делал желтыми... Любовался. И менял на белые. Но снежинки - это не страшно. Страшно - это гирлянды. Со звуком

@BlagJager

Жыл бұрын

Ха, напомнил про существование статусбара. Еще можно было анимашку в тайтле пустить. В общем кто что хотел, то и накручивал на сайт, а еще был флеш! Ламповым был разве что сам процесс: трудишься долго, а результата немного. И большая радость в результате.

Свои первые сайты я верстал под нетскейп навигатор под ред хет ) уже потом пришел ие6 в мою жизнь. Занятно было без css и со специфическими для браузеров тегами ) Сколько лет прошло а теги все еще в памяти остались. )

ух как хочется продолжение увидеть))

В начале нулевых в универе проходили html и как раз применяли такие приемы с нарезанием кусочков картинок и размещением в таблицах. С тех пор я возненавидел html. Естественно, никаких удобных редакторов как VSC не было и процесс был очень мучительным. До сегодняшнего дня я думал, что сейчас примерно так же делается.

Крутая история! Я в 2009 только школу закончил, но изучать html начал ещё в 2006. Повезло, что в нашей деревне была летняя школа "веб-мастера" (тогда это так называлось, ага), ещё и бесплатно, меня это как-то очень заинтересовало, но js я не осилил в том возрасте)) Пошёл паскаль изучать. 16:36 можно ещё добавить, что progid - это программа, записанная в системных dll файлах, а всё, что начинается с DX - это DirectX :) Про безопасность тогда особо не думали, зато какой функционал! IE просто рвал всех по графике

С ужасом вспоминаю те смутные времена. Но оттого ещё приятнее верстать в современном мире, когда есть, с чем сравнить )

Мои флэшбеки: Лечение `margin: 0 auto` в IE6, используя `text-align`. SEO-friendly логотип или заголовки красивым шрифтом, используя `text-indent: -9999px` + `background`. Макеты шириной 960px. Подход ненавязчивого JavaScript.

Как всегда прекрасная история и очень эстетичная подача! Хотеть продолжение!)

Компания-Волан-де-Морт на букву Я, имя которой нельзя произносить вслух 😉

@Disorrder

3 жыл бұрын

В Я.Почту 5 лет назад было тестовое задание с таблицами, IE6 и вот это вот всё ))) Искали олдов

Хорошо, что в 2008 мне было 3 года!

Я не кодер, но как же интересно вы рассказываете ) Спасибо, жду продолжения!

Круто, аж ностальгия накрыла, помню ещё была проблема с margin в ei если использовать float. А ещё помню жуткий редактор Microsoft frontpage для "верстки" таблицами

Кайф). Изучаю вёрстку кусками по вашим видео)

Большое спасибо за выпуск !

Ничего себе, а мы в 2008 про Бэм тогда ничего не знали((

Я такие древние времена не застал) Ходил в школе на курсы веба и верстал что-то не сложное на табличках и дивах. А потом появились флексбоксы и тогда это казалось просто нереальной магией

Вспоминаю те времена. Своим ученикам в детской школе программирования объясняю шутя, как мы делали задачи без флексов, трансформов, гридов. Привожу им примеры из 2008-09х) что бы знали. Но думаю ограниченный инструментарий не делали из нас тогдашних креативных гигантов, изменился инструментарий, но и дизайнерские задачи стали сложнее, поэтому сегодня тоже есть не мало задач над, которыми надо думать. Но верстка под ie6 научила конечно логическому и структурному мышлению))

Делал тоже табличкой, а по другому никак. Это видео наверное для поколения майнкрафтеров.

Ощущение, что будто вчера делал input-ы из картинок... Спасибо за ностальгию)) Можно это же сделать на inline-block + float, затем на flex. Если смотреть в сторону flex - то в барузере, выпущенном лет эдак 5 назад также будет работать, а float + inline-block - наверно все 10. По-моему в 2010 году уже начали с таблиц массово перелазить как раз на float или inline-block, точно не помню. Всё же в то время вёрстка была гораздо менее доступной для людей в плане освоения (и кажется интересней и более захватывающей или просто мы были моложе))). Удивительно, как быстро мы отказались от таблиц, прыгнули на float, затем на flex и потом grid, хотя именно таблицами пользовались очень и очень долго.

Отличный обзор, всё именно так и было, делаю сайты с 2007 года. Есть даже работающие проекты в сети с похожими плюшками.

О, как ловко!)) Спасибо)

Верстаю только 3 года, боже, я так рад, что не пришлось работать с этим. Хотя, возможно, своеобразная романтика в этом есть :)

@Disorrder

3 жыл бұрын

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

Спасибо, взностальгнул!

Чьёрт возьми, какая ностальгия!

с зимушкой тебя))))

Просто Вау!

У меня был сайт, в котором для обратной связи было указано FIDO.... 1997 год... Писался во Фронтпейдже...

Попапы очень похожи на те что были в Яндекс картах 🤔

@pepelsbey

3 жыл бұрын

Хмм, думаете? :D

@vladislav805

3 жыл бұрын

Тоже так показалось, что это YMaps v1. Проверил, реально, Вадим урезал префикс: "YMaps-b-balloon YMaps-b-balloon_full YMaps-b-balloon_close-off". Я ещё удивился, что js-код для YMaps v1 хранится с комментариями и не в минифицированном виде: api-maps yandex ru /1.1/index.xml

В 2006 году рисовал красивые прогресс-бары с помощью SVG, причём рендерились они на сервере, прямо внутри HTML. Работало оно только в Опере и, возжно, в Firefox, но мне было всё-равно, потому что делалось оно для внутренней админки, которой пользовался только я

Ждал появления .htc :( В 2008 предпочитал делать закругления и тени россыпью div и :before :after, был под влиянием книги Зельдмана

@ManyakNag

3 жыл бұрын

Это был отличный хак

я только застал период флоутов, и то потом пропустил, потому что бросал верстку на несколько лет. Потом пришел уже период флексов, и я снова начал верстать ) Да уж, интересное время было ) Вперед, Вадим, сделай челендж 2008 vs 2020 верстка )

Чуть позже для ие мы использовали паровозик из условных комментариев которые рисовали тег хтмл назначая им классы для соответствующих иешек. Там были такие классы как ie6 ie7 ie8 ie9 По этим классам можно было писать оверрайды стилей рядом с базовыми стилями. Примерно это выглядило как .my-class { базовые стили } .ie8 .my-class { стили только для ие8 } .ie9 .my-class { стили только для ие9 } Пример кода можно глянуть тут github.com/jt3k/stylus-ie-mixin/

Я вам могу сказать только одно: "Никто никогда не вернется в 2008 год" ))) Но флэшбеки олдфага не перестают возникать, когда поддерживаешь легаси...

О даааа! Ты еще не видел мою верстку, таблица в таблице в таблице )))) а под ie 4 больше то ни чего ни не работало нормально ))

Процессоры тоже тянут в себе очень много легаси, которое сжирает порядочно производительности только для того, чтобы запускать какие-то старые программы, которые используют старые инструкции. Постепенно они отваливаются, но это происходит очень медленно. Место на чипе не резиновое. Я бы на самом деле за то, чтобы в какой-то момент совершить революцию, разделить всю индустрию на до и после, убрать всё дурацкое легаси из браузеров, оставить всё хорошее и убрать всё плохое :D Web 2.0. Не в ближайшие 5 лет, может даже не 10, даже не знаю, что для этого нужно. Но если это удвоит производительность например, то было бы здорово. Старые вещи могли бы работать через эмуляцию, если очень надо. Никто ведь не поиграет в игры от первой PS на PS5, так? Только если взломать консоль и написать под неё эмулятор. Так же и для старых сайтов придётся качать старый браузер однажды.

у него 6 пальцев, ё-моё XHTML P.S. увидел еще до то, как это стало мейнстримом

О, да... Мне недавно попался "привет из середины 2к". Ностальгия ...

Хочешь прокатится до 2008 года? просто сверстай шаблон письма для Outlook =)

Еще дивами высотой в пиксель и разной ширины делали закругленные уголки) много лишней разметки зато картинки не тащить и перекрашивать можно из css

Перед тем как начать верстать, ты уже в голове у себя резал макет на "запчасти", представлял в голове блочную модель, применял хаки игроделов 8-ми битных консолей. Кастомные шрифты от дизайнера которые рисовались канвасом с помощью JS либы cufon Я бы сравнил это с искусством.

@pepelsbey

3 жыл бұрын

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

Эх, жаль не сохранился мой старый код, было бы очень интересно посмотреть :) Тут в коментах много чего интересного вспомнили, упомяну ещё, что кроме условных комментариев использовались хаки в самом цсс, не только для разных ИЕ, но и для Оперы и Фаерфокса.

@pepelsbey

3 жыл бұрын

А я зачем-то храню все проекты у себя, где-то с 2003 года

А ну-ка, кто помнит этот DDbelatedpngfix?? Когда уже почти забили на IE6, но все равно осматривались, типа вдруг там кто-то PNG (ОГО) заюзает. Теперь вспонимается - как-будто каждый ходил с этаким вебпак-конфигом под мышкой, такой сам себе вебпак во плоти, со всеми своими нужными приблудами

m-left.png и m-right.png можно было нарисовать высотой в 1px и использовать background-repeat (там ведь нет скруглений) картинка будет весить меньше... Да, в 2008 мы ещё и экономили килобайты.

@pepelsbey

3 жыл бұрын

Это вам в 2020 году так кажется, а в 2008 нам ещё нужно было наложить на них фильтр для прозрачности PNG в IE и там повторы не работали.

Знакомо)

Открыл свой сайт, который делал в 2008-м, да, там тоже фильтры альфа канала для IE на каждую картинку. Валидацию не проходит, но все работает.

Помню тебя году этак в 2011-2012м на киевском WSD (обоже, WSD, аааааааааааа ;( ) в этой самой футболке :)

Жиза))

Контент супер! Вадим, ты уже не читаешь лекции в HTMLACADEMY?

@pepelsbey

3 жыл бұрын

Да, конечно, продолжаю работать автором

Я застал эти времена )) помню в ВЕБ-ДИЗАЙНЕ (НЕ UI) Было модно делать border-radius через Photoshop )))

Расскажите подробно об Intersection Observer API, а именно - отложенная загрузка изображений или другого контента по мере прокрутки страницы. Заранее спасибо

@pepelsbey

3 жыл бұрын

Почитайте об этом habr.com/ru/post/494670/

было дело

Сам к вёрстке отношение не имею (слава богу, повесится легче), но приходилось пользоваться одной специфичной системой мониторинга трафика (NVStat), так там страница авторизации была свёрстана так же. NVStat - это набор Perl и PHP скриптов, предназначенных для анализа и просмотра лог файлов Novell Border Manager 3.x/WanStat/TSE 0.93f/Volera Excelerator 2.2 Да-да, я динозавр ещё тот!!!

А сегодня пишешь: "display: flex;" - и думаешь... эээээй, а чего страница-то не сверсталась?! :D

Я на эту верстку смотрю, и мне кажется, что я вижу какое-то программирование, а не разметку))

Ну код компонента понятно, Вадим, пилил, но а картинки то эти кто делал? Штатный дизайнер? Или все силами одного разработчика? Я как тоже столкнулся с тем что на одном старом сайте вместо серого фона стоит серая картинка шириной в 1px на репите. Был очень удивлен. И ведь до сих пор работает. И картинки в таблице тоже попадались, но тогда я этого не знал и сильно удивлялся когда при попытке сохранить изображение по правому клику скачивалась только её часть.

@pepelsbey

2 жыл бұрын

Картинки делали дизайнеры, мы дальше делали по ним код

Но и сейчас отрисовать такие хвостики с помощью css не представляю как. Есть svg конечно, с возможностью применять разный градиент, но попробуй этот svg сгенерировать из растра. И с помощью box-shadow не возможно попиксельно воссоздать именно такую тень, как здесь.

В 2008 году мне было 7 лет... Блин :(

"expression offsetWidth%2 ? -1 : 0" вроде этот хак при position: absolute чтоб right(и вроде bottom) работал в IE5-6. Почему-то браузер не правильно рассчитывал положение при четной/нечетной ширине. Кстати подобные попапы в этих браузерах хорошо верстались на дивах.

@pepelsbey

3 жыл бұрын

Да, так и было: резина в IE6 считалась так, что иногда 50% + 50% становились слегка больше 100% и блоки выпадали.

Вадим, а зачем весь низ целой картинкой? Это ведь делает попап нересайзабельным в какой-то момент. Почему не отдельно уголок - повторяющаяся через background-repeat: x однопиксельная сторона - хвостик со вторым уголком (либо отдельно уголок, отдельно хвостик)? Ну и тень можно туда же всобачить при желании :) P.S. прозрачность пнг в ie7 появилась, да :)

@pepelsbey

3 жыл бұрын

Низ картинкой для того, чтобы можно было этой же картинке задать фильтр с полупрозрачностью для IE6. Этот фильтр работает только с целой картинкой, повтор не сработает. А чтобы не готовить (и не грузить) сразу две картинки - используем одну для всех браузеров.

@dmitriymiroshnichenko418

3 жыл бұрын

А, фильтр нельзя наложить на background-image, понял)

Спасибо за видео! А в те времена вообще было понятие адаптивности? Мобильного интернета то толком не было.

@pepelsbey

3 жыл бұрын

Поворотная статья, а позже и книга, Итана Маркота «Responsive Web Design» вышла на A List Apart в 2010 году. До тех пор делали только отдельные версии сайтов для редких и слабых мобильных браузеров alistapart.com/article/responsive-web-design/

@TheKzfor

3 жыл бұрын

были вап сайты)

Верните мне мой 2020

Олдскулы свели. Щас вспоминаю верстку в 2000 году с php4

А на Netscape полетит?)

@pepelsbey

3 жыл бұрын

На Netscape Navigator вряд ли, а вот на первых опенсорсных версиях Netscape на движке Firefox - вполне :)

border-image

@pepelsbey

3 жыл бұрын

Да, есть такой вариант, но для современных браузеров и с диагональю будет непросто. Я уже сделал версию 2020, на этой неделе покажу :)

Мне кажется или сейчас такое сделать тоже будет не очень просто и как итог такое просто не рисуют? В общем ждём современного решения и через 12 лет посмотрим насколько оно ужасно)

@pepelsbey

3 жыл бұрын

Не, рисуют сложное и сейчас. Просто сделать это гораздо проще ) Хотя посмотрим, как получится версия 2020.

@ManyakNag

3 жыл бұрын

свг порешает

Ностальжи ... :)

Не пойму логики чем отличаются хаки от хуков

@pepelsbey

3 жыл бұрын

Хуки у вас в Реакте, наверное, а хаки - это неофициальный, быстрый и часто грязный способ что-то поправить.

Красивый аккуратный код, только кольнуло глаз сокращение в `.b-balloon-shad`. Кстати, shad - это оказывается рыба семейства сельдевых 😅 Помню ещё те времена IE6 и когда для скруглённых углов были отдельные картинки, а чё, лишь бы работало, главное - продукт :) Только на ретине сегодня смотрелось бы не очень.

@pepelsbey

3 жыл бұрын

Да, сокращение стыдноватое, я больше так не делаю )

Я так делал! Но так и не стал хорошим верстальщиком. И в новую ветку не влился:)

xHTML - кулак с 6 пальцами))))

бордеров у них не было...) нормального доступа к DOM не было и только только появился термин DHTML, а IE был передовым браузером)))

Привет старичкам html 4.01

запрещенная алхимия из 2008

Прекратите ковырять старые раны! Сайтs написанные в Word, сайты написанные во Front Page, Macromedia Flash...

еще застал флоуты