Эра CSS хаков
Дизайнеры хотели много того, чего CSS просто не мог предложить.
Круглые углы были большими. Квадратные углы вышли из моды, и теперь все хотели пуговицы с круглыми углами, поскольку они были "будущим". (Родные кнопки также почему-то вышли из моды.) Увы, у CSS не было возможности сделать это. Вариантами были:
Сделать фоновое изображение фиксированного размера из скругленного прямоугольника и поместите его на кнопку фиксированного размера. Просто отбросить текст и просто сделать все это изображением.
Сделать общее фоновое изображение и масштабируйте его так, чтобы оно подходило. Более умный, но углы могли оказаться не круглыми.
Сделатьпрямоугольник с закругленными углами, вырежьте угол и края и поместите их в таблицу 3 × 3 с меткой кнопки посередине. Еще лучше, используйте JavaScript, чтобы сделать это на лету.
И вообще, сделать весь сайт одним большим Flash приложением.
Другая проблема заключалась в том, что IE 6 не понимал PNG с 8-битной альфа-версией; он может корректно отображать PNG только с 1-битным альфа-каналом, то есть каждый пиксель либо полностью непрозрачный, либо полностью прозрачный, как GIF-файлы. Вы должны были согласиться на неровные края, готовить чистый фоновый цвет на изображение, или применить различные исправления, которые сосредоточены вокруг этой чертовой чепухи:
По аналогии: градиенты и тени! Вы не можете иметь красивые пластиковые кнопки без них.
Прозрачность была немного беспорядочной. Большинство браузеров с самого начала поддерживали свойство непрозрачности CSS 3 ... за исключением IE, который нуждался в еще одном дурацком фильтре Microsoft. И если вам нужен только прозрачный фон, вам нужен полупрозрачный PNG, который ... ну, вы знаете.
С самого начала jQuery поставлялся со встроенными анимированными эффектами, такими как fadeIn, и они начали появляться повсюду. Это было что-то вроде веб-эквивалента того, как каждый пользователь Linux в середине 00-х (включая меня) использовал этот гребаный эффект куба Compiz.
Очевидно, вам нужен JavaScript, чтобы вызвать исчезновение элемента в большинстве интересных случаев, но использование его для управления реальной анимацией было немного трудоемким и создавало нагрузку на браузеры. Просмотр с вкладками усугублял это, так как браузеры были в основном однопоточными, и по разным причинам каждая открытая страница работала в одном потоке.
Ой! Чередование цветов фона в строках таблицы. С тех пор это вышло из моды, но я думаю, что это позор, потому что человек сделал это, чтобы было легче читать таблицы. Но у CSS не было ответа на этот вопрос, поэтому вам нужно было либо дать каждой строке другой класс, например,
(надеюсь, таблица сгенерирована с помощью кода!), Либо сделать какую-то чушь jQuery.
В CSS 2 появился дочерний селектор
, так что вы можете писать такие вещи, как
, для стилизации специальных списков, не путаясь во вложенных списках, и IE 6 не ПОДДЕРЖИВАЛ ЭТО!
Все это просто эстетические проблемы. Если вы интересовались версткой, ну, с появлением Firefox ваша жизнь стала намного проще и сложнее.
Помните встроенный блок? Firefox 2 действительно поддерживает это! Он был глючным и скрыт за префиксом вендора, но он более или менее работал, что позволило дизайнерам начать играть с ним. А затем Firefox 3 получил поддержку более или менее полно, что казалось чудом. Версия 3 нашей сетки миниатюр проста как ширина и встроенный блок:
Общая идея inline-block заключается в том, что внутренняя часть действует как блок, но сам блок помещается в обычный текст, как изображение. Таким образом, каждая миниатюра содержится в блоке, но все боксы лежат рядом друг с другом, и из-за их одинаковой ширины они перетекают в сетку. А поскольку это функциональная строка текста, вам не нужно обходить какие-либо странные воздействия на остальную часть страницы, как это было с плаваниями.
Конечно, у этого были некоторые недостатки. Например, вы ничего не могли бы сделать с оставшимся пространством, поэтому был риск большой пустой пустоты справа с патологическими размерами экрана. У вас все еще была проблема разбить сетку с широкой ячейкой. Но по крайней мере это не плавает.
Одна маленькая проблема: IE 6. Он технически поддерживал inline-block, но только на элементах, которые были естественно встроенными - такие как
и
, а не
. Таким образом, не те, которые вы на самом деле хотите (или думаете) использовать встроенный блок. Вздох.
К счастью для нас, в какой-то момент абсолютный гений обнаружил hasLayout, внутреннюю оптимизацию в IE, которая определяет, имеет ли элемент ... э-э ... макет. В основном это меняет путь рендеринга для элемента - делая его по-разному глючным. В результате вышесказанное работает в IE 6, если добавить пару строк:
Первые звездочки делают свойство недействительным, поэтому браузеры должны игнорировать всю строку ... но по какой-то причине мне не понятной, IE 6 игнорирует звездочки и принимает остальную часть правила. (Практически любая пунктуация сработала, включая дефис или - мой личный фаворит - подчеркивание.) Свойство zoom - это расширение Microsoft, которое масштабирует материал, с побочным эффектом, который он предоставляет мистическому свойству «layout» для элемента. И
должен заставлять каждый элемент выводить свое содержимое в одну большую строку текста, но IE обрабатывает встроенный элемент, который имеет «макет», примерно как встроенный блок.
И здесь мы увидели истинный потенциал CSS-месс. Специфичные для браузера правила с преднамеренным неправильным синтаксисом, который один браузер игнорировал бы, чтобы воспроизвести эффект, который до сих пор не совсем ясно описывается тем, что вы пишете. Полные учебники написаны, чтобы объяснить, как сделать что-то простое, например, сетку, но на самом деле это работает в браузерах большинства людей. Вы также увидите
и все прочие глупости. Вот полный список! И помните этот хак с «clearfix»? Полная версия, совместимая с любым браузером, немного хуже:
Стоит ли удивляться, что люди начали ;f;lfnm CSS?
Это была эпоха слепого копирования/вставки в расстроенных надеждах заставить эту чертову штуку работать. Показательный пример: у кого-то (я выкопал исходный источник один раз, но не могу найти его сейчас) была идея о том, чтобы всегда устанавливать body {font-size: 62.5%} из-за комбинации «хорошести относительных единиц» и желание переопределить, по-видимому, огромный размер шрифта браузера по умолчанию в 16 пикселей (что, как оказалось, является правильным) и иметь дело с ошибками IE. Некоторое время спустя он откатил, но ущерб уже был нанесен, и теперь тысячи веб-сайтов начинают с этого как «лучшая практика». Это означает, что если вы хотите изменить размер шрифта вашего браузера по умолчанию в любом направлении, вы облажались - уменьшите его, и куча Интернета станет микроскопической, увеличьте масштаб, и все будет намного меньше, чем вы просили, увеличьте его, чтобы компенсировать, и все, будет огромным. По крайней мере, теперь у нас есть лучший масштаб страницы, я думаю.
Да, и помните: переполнение стека еще не существовало. Этот материал был передан исключительно из уст в уста. Если вам повезло режиме причуд и веб-сайте Эрика Мейера.
На самом деле, посетите сайт
(Я не могу понять, насколько пионером CSS является Эрик Мейер. Когда его младшая дочь Ребекка умерла шесть лет назад, она была уникально увековечена своим собственным именем цвета CSS,
Будущее наступало,постепенно
Дизайнеры и разработчики раздвигали границы возможностей браузеров. Браузеры справились со всем этим несколько плохо. Все исправления, обходные пути и библиотеки были непонятными, хрупкими, подверженными ошибкам и/или тяжелыми.
Ясно, что браузеры нуждались в некоторой новой функциональности. Но просто подсунуть что-то не поможет; Microsoft сделала много этого, и это в основном стало причиной беспорядка.
Началось несколько попыток борьбы. Поскольку глава W3C по-прежнему явно отверг предложенные улучшения HTML в пользу XML - некоторые люди из (активных) производителей браузеров Apple, Mozilla и Opera решили создать свой собственный клуб. WHATWG появилась в июне 2004 года и начала работу над HTML5. (В конечном итоге это определило бы обработку ошибок , что полностью избавило от необходимости XHTML и устранило ряд проблем с безопасностью при работе с произвольным HTML. Также это дало нам некоторые новые полезности, такие как нативный контроль над аудио, видео и формами для даты, цвета и другие вещи, которые неуклюже обрабатывались пользовательскими элементами управления на основе JavaScript. И, до сих пор, часто так и есть.)
Потом был CSS 3. Я не уверен, когда он начал существовать. Он появлялся медленно, изо всех сил, как птенец, вылупившийся из яйца чтобы действительно быть реализованным где угодно.
Я должен сделать много умных предположений здесь, но я думаю, что это началось с
. В частности, с
. Я не знаю, когда он был впервые представлен, но трекер ошибок Mozilla упоминает об этом еще в 1999 году.
Видите, собственный интерфейс Firefox отображается с помощью CSS. Если Mozilla захотела сделать что-то, что нельзя сделать с помощью CSS, они добавили собственное свойство с префиксом
, чтобы указать, что это было их собственное изобретение.
Таким образом, я предполагаю, что толчок для CSS 3 действительно начался, когда Firefox взлетел, и дизайнеры обнаружили
. Внезапно, встроенные закругленные углы стали доступны! Нет больше vsrfymz в Photoshop, вам нужно было написать только одну строку! Практически в одночасье все,повсюду округлилось.
Общие проблемы решались по одному за счет новых функций CSS, которые были объединены в новую версию CSS: CSS 3. Крупными были решения проблем проектирования, упомянутых ранее:
- Закругленные углы, обеспечиваемые границей радиуса.
- Градиенты, предоставляемые
и друзьями.
- Многочисленные фоны, которые не были насущной проблемой, но которые помогли сделать некоторые вещи проще.
- Прозрачность, обеспеченная
и цветами с альфа-каналом.
- Коробка теней.
- Текстовые тени, которые были в CSS 2, но выпали в 2.1 и так и не были реализованы.
- Границы изображения, так что вы могли бы сделать даже более причудливые вещи, чем просто закругленные границы.
- Переходы и анимации, которые теперь можно легко выполнить, не требуя jQuery (или вообще никакого JS).
, который решил проблему чередующихся строк с чистым CSS.
- Трансформации. Чего ждать? Эта информация просочилась из SVG, которую также должны были реализовать браузеры, и которая в значительной степени основана на трансформациях. Код уже был там, так что, эй, теперь мы можем вращать вещи с помощью CSS! Не мог сделать это раньше. Здорово.
- Веб-шрифты, которые были в CSS в течение некоторого времени, но только когда-либо реализовывались в IE и только с некоторым тупым DRM-загруженным форматом шрифтов. Теперь мы не были ограничены четырьмя плохими шрифтами, которые поставляются с Windows, и которые никто больше не имеет!
Это было довольно здорово! Они не решали никаких проблем с макетом, но решали эстетические проблемы, с которыми дизайнеры неуклюже работали, используя множество изображений и / или JavaScript. Это означало меньше материалов для загрузки и больше текста, используемого вместо изображений, оба из которых были довольно хороши для Интернета.
Главная ирония в том, что все, что вы могли сделать с этими функциями, почти сразу вышло из моды, и теперь мы снова вернулись к плоским прямоугольникам.
Адский префиксинг браузера
Увы! Все было не так с миром.
Я полагаю, что некоторые из этих новых штуковин были изначально разработаны поставщиками браузеров и имели префикс. Некоторые более поздние были разработаны комитетом CSS, но реализованы браузерами, в то время как дизайн все еще находился в движении, и поэтому также имел префикс.
Так начался префикс адский, который продолжается и по сей день.
У Mozilla был
, поэтому, когда Safari реализовал его, он был назван
(«WebKit» - это название разветвления Apple KHTML). Затем спецификация CSS 3 стандартизировала ее и назвала просто
. Это означало, что если вы хотите использовать закругленные границы, вам нужно указать три правила:
Первые два сделали эффект действительно работающим в текущих браузерах, а последний был ориентирован на будущее: когда браузеры реализовали реальное правило и отбросили префиксные, оно вступило во владение.
Вам приходилось делать это каждый раз, потому что CSS не является языком программирования и не имеет макросов, функций или чего-то подобного. Иногда Opera и IE имеют свои собственные реализации с префиксами
и
, в результате чего общее количество копий достигает пяти. С градиентами стало намного хуже; синтаксис прошел через ряд серьезных несовместимых ревизий, так что вы даже не могли полагаться на копирование/вставку и изменение имени свойства!
И множество людей, ну, все испортили. Я не могу винить их слишком сильно. Я имею в виду, это отстой. Но на достаточном количестве страниц использовались только префиксные формы, а не окончательная форма, поэтому браузеры должны были поддерживать префиксную форму дольше, чем им хотелось бы, чтобы избежать взлома. И если префиксная форма все еще работает и это то, что вы привыкли писать, то, возможно, вы все равно не будете беспокоиться о ней без префикса.
Хуже того, некоторые люди использовали бы только ту форму, которая работала в их любимом браузере. Это стало особенно плохо с ростом мобильных веб-браузеров. Встроенные браузеры на iOS и Android - Safari (WebKit) и Chrome (первоначально WebKit, теперь - форк), поэтому вам нужно только «использовать» свойства
. Что осложнило Mozilla, когда она выпустила Firefox для Android.
Эй, помнишь весь этот разгром с IE 6? Ну вот опять! Достаточно плохо, что в конечном итоге Mozilla решила реализовать ряд свойств
, которые до сих пор поддерживаются даже в настольном Firefox. Ситуация настолько глупа, что Firefox теперь поддерживает некоторые эффекты только через эти свойства, например
, который не стандартизирован.
Более того, текущий разветвленный движок Chrome называется Blink, поэтому технически он также не должен использовать свойства
. И все же, вот и мы. По крайней мере, это не так плохо, как путаница в пользовательском агенте.
В настоящее время производители браузеров в значительной степени отказались от префиксов; вместо этого они скрывают экспериментальные функции за флагами (поэтому они будут работать только на компьютере разработчика), а новые функции теоретически разработаны так, чтобы они были меньше и их легче было стабилизировать.
Этот беспорядок был, вероятно, огромным мотивирующим фактором для разработки Sass и LESS, двух языков, которые производят CSS. Или ... два CSS-препроцессора, может быть. У них очень похожие цели: добавлять переменные, функции и некоторые макросы в CSS, что позволяет исключить множество повторений, взломов браузера и прочую ерунду из ваших таблиц стилей. Черт, этот блог все еще использует SCSS, хотя его использование постепенно уменьшалось с течением времени.
Flexbox
Но потом, как ангел, спустился с небес… flexbox.
Flexbox существует уже давно - якобы он частично поддерживал Firefox 2 еще в 2006 году! Он прошел несколько несовместимых пересмотров и потребовались годы, чтобы стабилизироваться. Тогда IE потребовалось много времени, чтобы реализовать его, и вы действительно не хотите полагаться на инструменты верстки, которые работают только для половины вашей аудитории. Лишь относительно недавно (2015? Позже?) Flexbox получил достаточно широкую поддержку для безопасного использования. И я могу поклясться, что до сих пор сталкиваюсь с людьми, чей нынешний Safari вообще не распознает его без префиксов, хотя Safari якобы отбросил префиксы пять лет назад ...
В любом случае, flexbox - это реализация CSS довольно распространенного инструмента макета GUI: у вас есть родитель с несколькими дочерними элементами, и у родительского элемента есть некоторое доступное пространство, и он автоматически распределяется между дочерними элементами.
Общая идея заключается в том, что браузер вычисляет, сколько места имеет родительский элемент, и «начальный размер» каждого дочернего элемента, вычисляет, сколько дополнительного пространства есть, и распределяет его в соответствии с гибкостью каждого дочернего элемента. Подумайте о панели инструментов: вы можете захотеть, чтобы каждая кнопка имела фиксированный размер, но вы хотите добавить разделители, которые разделяют любой оставшийся пробел в равной степени.
Как только это будет сделано, в вашем распоряжении также будет несколько вариантов: вместо этого вы можете распределить дополнительное пространство между детьми, вы можете попросить детей растягиваться до одинаковой высоты или выравнивать их различными способами, и вы даже можете сделать так, чтобы они были объединены в несколько рядов, если они не подходят всем!
С этим мы можем сделать еще одну трещину в этой сетке миниатюр:
Это чудесно. Я забыл о встроенном блоке на ночь и в основном тек слюной по этому поводу, пока он не получил всеобщую поддержку. Это даже очень ясно выражает то, что я хочу.
…почти. По-прежнему существует проблема, заключающаяся в том, что слишком широкие ячейки будут разбивать сетку, поскольку это все еще горизонтальный ряд, обернутый в несколько независимых линий. Это чертовски круто и решает ряд других проблем с макетом. Конечно, это достаточно хорошо. Если ...?
Я бы сказал, что массовое внедрение flexbox положило начало современной эре CSS. Но была одна давняя проблема ...
Медленая, агонизирующая смерть IE
У IE 6 ушло много времени, чтобы уйти. Доля не упала ниже 10% рынка (все еще огромная доля) до начала 2010 года или около того.
Firefox достиг 1.0 в конце 2004 года. IE 7 не был выпущен до двух лет спустя, он предлагал лишь скромные улучшения, он страдал от проблем совместимости с вещами, созданными для IE 6, и несогласных с IE 6 (многие из которых не были Computer Люди) вообще не видел причин для обновления. Vista поставлялась с IE 7, но Vista была своего рода провалом - я не верю, что она когда-либо была близка к обгону XP.
К другим факторам относились корпоративные ИТ-политики, которые часто принимают форму «никогда ничего не обновлять» - и часто по веской причине, поскольку я слышал бесконечные истории о внутренних приложениях, которые работали только в IE 6 по всевозможным ужасающим причинам. Затем была вся Южная Корея, которая по закону была обязана использовать IE 6, потому что они законодательно закрепили некоторые требования безопасности, которые могли быть реализованы только с помощью элемента управления ActiveX IE 6.
Таким образом, если вы поддерживали веб-сайт, который использовался - или, что еще хуже, требовался - людьми, которые работали на бизнес или жили в других странах, вы в значительной степени застряли с поддержкой IE 6. Люди, делающие небольшие персональные инструменты и сайты, рано отказались от совместимости с IE 6, и намазали их сайты все более и более противными баннерами, дразнящими тех, кто осмелился появиться, используя его ... но если бы вы были чьим-то боссом, почему бы вам сказать им, что это нормально, если отбросить 20% вашей потенциальной аудитории? Просто работай усерднее!
Напряжение росло с годами, так как CSS стал более способным, а IE 6 оставался якорем. Он по-прежнему даже не понимал PNG альфа без обходных путей, и между тем мы начинали получать более важные функции, такие как нативное видео в HTML5. Обходные пути усложнились, а список функций, которые вы просто не могли использовать, увеличился. (Я покажу вам, как выглядит мой блог в IE 6, но я не думаю, что он может даже подключиться - поддержка TLS, которую он поддерживает, настолько древняя и сломанная, что на большинстве серверов она отключена!)
Кстати, приветствую некоторых людей из команды YouTube, которые в июле 2009 года добавили предупреждающий баннер, призывающий пользователей IE 6 переключаться на что-либо еще, не спрашивая ни у кого одобрения. «В течение одного месяца ... более 10 процентов мирового трафика IE6 сократилось». Не все герои носят накидки.
Я бы отметил начало конца как день, когда YouTube фактически прекратил поддержку IE 6 - 13 марта 2010 года, почти через девять лет после его выпуска. Я не знаю, какое прямое влияние YouTube оказывает на корпоративных пользователей или правительство Южной Кореи, но огромная веб-компания, отказавшаяся от всего браузера, посылает довольно сильное сообщение.
Конечно, были и другие версии IE, и многие из них сами по себе были беспорядочными головными болями. Но каждый последующий стал менее болезненным, и в настоящее время вам даже не нужно слишком много думать о тестировании в IE (теперь Edge). Как раз вовремя Microsoft откажется от собственного движка рендеринга и превратит свой браузер в клон Chrome.
Сейчас
CSS довольно хорош сейчас. Тебе не нужны странные чертовы хаки, чтобы просто поставить вещи рядом друг с другом. Инструменты для разработки в браузере уже встроены и потрясающе - Firefox начал специально предупреждать вас, когда некоторые свойства CSS не вступят в силу из-за ценностей других! Непонятные неявные побочные эффекты, такие как «контексты стека» (какими бы они ни были), теперь можно задавать явно, с такими свойствами, как
.
Так много вещей, которые раньше были невозможны или болезненны или требовали неуклюжих плагинов, теперь поддерживаются изначально - аудио, видео, пользовательские рисунки, 3D-рендеринг ... не говоря уже об огромных эргономических улучшениях JavaScript.
Сеть по-прежнему немного катастрофична. Многие люди даже не знают, что flexbox и grid теперь поддерживаются почти повсеместно; но учитывая, сколько времени понадобилось, чтобы перейти от ранних спецификаций к широкой реализации, я не могу их винить. Вчера я видел новый небольшой сайт, который состоял в основном из огромного списка «миниатюр» различной ширины, и в нем использовались поплавки! Даже встроенный блок! Я не знаю, как нам удалось рассказать всем обо всех взломах, необходимых для того, чтобы это работало, но почему-то не получил ни слова о flexbox.
Но гораздо хуже, чем это: я все еще регулярно сталкиваюсь с сайтами, которые делают весь макет своей страницы с помощью JavaScript. Если вы используете uMatrix, ваш первый опыт будет с кучей текста, перекрывающим кучу другого текста. Конечно, это шаг назад? Что вы делаете, что ваш заголовок и боковая панель могут быть правильно выложены только при выполнении кода? Не похоже, что страница загружается без CSS - по умолчанию ничто в обычном HTML не будет перекрываться!
И еще есть мобильная сеть, которая, несмотря на все благие намерения, оказалась неудачной. Идея заключалась в том, что вы можете использовать медиазапросы CSS, чтобы разместить свой обычный сайт на экране телефона, но вместо этого большинство крупных сайтов имеют совершенно разные мобильные версии. Это означает, что либо на мобильном сайте отсутствует куча важных функций, и мне все равно придется неловко перемещаться по нему по телефону, либо сайт на рабочем столе полон дерьма, которое на самом деле никому не нужно.
(Между тем, собственные версии Google Документов / Листов / и т.д. для Android имеют около 5% возможностей веб-версий? Не знаете, что с этим делать.)
Хм. Настоятельно рассматриваю возможность написать что-то более подробное об улучшениях CSS со времен Firefox 3, аналогично тому, которое я написал для JavaScript. Но этот пост достаточно длинный.
Я не знаю, что будет дальше в CSS, особенно сейчас, когда flexbox и grid решили все наши проблемы. Я смутно осознаю, что делается некоторая работа над более обширной поддержкой математики и, возможно, некоторые функции для изменения цвета, как в Sass. Существует API рисования, который позволяет создавать фоновые изображения на лету с помощью JavaScript, используя API Canvas, что… довольно много. По-видимому, теперь в спецификации можно использовать attr () (который оценивается как значение атрибута HTML) в качестве значения для любого свойства, которое кажется классным и может даже позволить полностью реализовать таблицы HTML в CSS, но вы можете сделать То же самое с переменными.
Ты все еще здесь? Все закончилось. Иди домой.
И, возможно, отойди от монокультуры Blink и используй Firefox, в том числе на вашем телефоне, если только по какой-то причине вы не используете iPhone, который запрещает другие браузерные движки, что гораздо хуже, чем когда-либо делал Microsoft, но мы просто по каким-то причинам принимаем это.
Источник:
Дизайнеры хотели много того, чего CSS просто не мог предложить.
Круглые углы были большими. Квадратные углы вышли из моды, и теперь все хотели пуговицы с круглыми углами, поскольку они были "будущим". (Родные кнопки также почему-то вышли из моды.) Увы, у CSS не было возможности сделать это. Вариантами были:
Сделать фоновое изображение фиксированного размера из скругленного прямоугольника и поместите его на кнопку фиксированного размера. Просто отбросить текст и просто сделать все это изображением.
Сделать общее фоновое изображение и масштабируйте его так, чтобы оно подходило. Более умный, но углы могли оказаться не круглыми.
Сделатьпрямоугольник с закругленными углами, вырежьте угол и края и поместите их в таблицу 3 × 3 с меткой кнопки посередине. Еще лучше, используйте JavaScript, чтобы сделать это на лету.
И вообще, сделать весь сайт одним большим Flash приложением.
Другая проблема заключалась в том, что IE 6 не понимал PNG с 8-битной альфа-версией; он может корректно отображать PNG только с 1-битным альфа-каналом, то есть каждый пиксель либо полностью непрозрачный, либо полностью прозрачный, как GIF-файлы. Вы должны были согласиться на неровные края, готовить чистый фоновый цвет на изображение, или применить различные исправления, которые сосредоточены вокруг этой чертовой чепухи:
Код:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');Прозрачность была немного беспорядочной. Большинство браузеров с самого начала поддерживали свойство непрозрачности CSS 3 ... за исключением IE, который нуждался в еще одном дурацком фильтре Microsoft. И если вам нужен только прозрачный фон, вам нужен полупрозрачный PNG, который ... ну, вы знаете.
С самого начала jQuery поставлялся со встроенными анимированными эффектами, такими как fadeIn, и они начали появляться повсюду. Это было что-то вроде веб-эквивалента того, как каждый пользователь Linux в середине 00-х (включая меня) использовал этот гребаный эффект куба Compiz.
Очевидно, вам нужен JavaScript, чтобы вызвать исчезновение элемента в большинстве интересных случаев, но использование его для управления реальной анимацией было немного трудоемким и создавало нагрузку на браузеры. Просмотр с вкладками усугублял это, так как браузеры были в основном однопоточными, и по разным причинам каждая открытая страница работала в одном потоке.
Ой! Чередование цветов фона в строках таблицы. С тех пор это вышло из моды, но я думаю, что это позор, потому что человек сделал это, чтобы было легче читать таблицы. Но у CSS не было ответа на этот вопрос, поэтому вам нужно было либо дать каждой строке другой класс, например,
Код:
<tr class = "odd">В CSS 2 появился дочерний селектор
Код:
>
Код:
ul.foo> liВсе это просто эстетические проблемы. Если вы интересовались версткой, ну, с появлением Firefox ваша жизнь стала намного проще и сложнее.
Помните встроенный блок? Firefox 2 действительно поддерживает это! Он был глючным и скрыт за префиксом вендора, но он более или менее работал, что позволило дизайнерам начать играть с ним. А затем Firefox 3 получил поддержку более или менее полно, что казалось чудом. Версия 3 нашей сетки миниатюр проста как ширина и встроенный блок:
Код:
.thumbnails li {
display: inline-block;
width: 250px;
margin: 0.5em;
vertical-align: top;
}Конечно, у этого были некоторые недостатки. Например, вы ничего не могли бы сделать с оставшимся пространством, поэтому был риск большой пустой пустоты справа с патологическими размерами экрана. У вас все еще была проблема разбить сетку с широкой ячейкой. Но по крайней мере это не плавает.
Одна маленькая проблема: IE 6. Он технически поддерживал inline-block, но только на элементах, которые были естественно встроенными - такие как
Код:
<b>
Код:
<i>
Код:
<li>К счастью для нас, в какой-то момент абсолютный гений обнаружил hasLayout, внутреннюю оптимизацию в IE, которая определяет, имеет ли элемент ... э-э ... макет. В основном это меняет путь рендеринга для элемента - делая его по-разному глючным. В результате вышесказанное работает в IE 6, если добавить пару строк:
Код:
.thumbnails li {
display: inline-block;
width: 250px;
margin: 0.5em;
vertical-align: top;
*zoom: 1;
*display: inline;
}
Код:
display: inlineИ здесь мы увидели истинный потенциал CSS-месс. Специфичные для браузера правила с преднамеренным неправильным синтаксисом, который один браузер игнорировал бы, чтобы воспроизвести эффект, который до сих пор не совсем ясно описывается тем, что вы пишете. Полные учебники написаны, чтобы объяснить, как сделать что-то простое, например, сетку, но на самом деле это работает в браузерах большинства людей. Вы также увидите
Код:
* html, html> / ** / body
Код:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */Это была эпоха слепого копирования/вставки в расстроенных надеждах заставить эту чертову штуку работать. Показательный пример: у кого-то (я выкопал исходный источник один раз, но не могу найти его сейчас) была идея о том, чтобы всегда устанавливать body {font-size: 62.5%} из-за комбинации «хорошести относительных единиц» и желание переопределить, по-видимому, огромный размер шрифта браузера по умолчанию в 16 пикселей (что, как оказалось, является правильным) и иметь дело с ошибками IE. Некоторое время спустя он откатил, но ущерб уже был нанесен, и теперь тысячи веб-сайтов начинают с этого как «лучшая практика». Это означает, что если вы хотите изменить размер шрифта вашего браузера по умолчанию в любом направлении, вы облажались - уменьшите его, и куча Интернета станет микроскопической, увеличьте масштаб, и все будет намного меньше, чем вы просили, увеличьте его, чтобы компенсировать, и все, будет огромным. По крайней мере, теперь у нас есть лучший масштаб страницы, я думаю.
Да, и помните: переполнение стека еще не существовало. Этот материал был передан исключительно из уст в уста. Если вам повезло режиме причуд и веб-сайте Эрика Мейера.
На самом деле, посетите сайт
Ссылка скрыта от гостей
Майера, чтобы увидеть некоторые дикие примеры того, что делали люди, даже с использованием только CSS 1, еще в 2002 году. Я до сих пор считаю, что complexspiral - чистый гений, даже если вы можете сделать это в настоящее время с непрозрачностью и только одно изображение. Подход в
Ссылка скрыта от гостей
не получит нативную поддержку CSS еще несколько лет назад, с
Ссылка скрыта от гостей
! Он также принес нам
Ссылка скрыта от гостей
, устраняя различия между стилями браузеров по умолчанию.(Я не могу понять, насколько пионером CSS является Эрик Мейер. Когда его младшая дочь Ребекка умерла шесть лет назад, она была уникально увековечена своим собственным именем цвета CSS,
Ссылка скрыта от гостей
. Вот как высоко его оценивает веб-сообщество.)Будущее наступало,постепенно
Дизайнеры и разработчики раздвигали границы возможностей браузеров. Браузеры справились со всем этим несколько плохо. Все исправления, обходные пути и библиотеки были непонятными, хрупкими, подверженными ошибкам и/или тяжелыми.
Ясно, что браузеры нуждались в некоторой новой функциональности. Но просто подсунуть что-то не поможет; Microsoft сделала много этого, и это в основном стало причиной беспорядка.
Началось несколько попыток борьбы. Поскольку глава W3C по-прежнему явно отверг предложенные улучшения HTML в пользу XML - некоторые люди из (активных) производителей браузеров Apple, Mozilla и Opera решили создать свой собственный клуб. WHATWG появилась в июне 2004 года и начала работу над HTML5. (В конечном итоге это определило бы обработку ошибок , что полностью избавило от необходимости XHTML и устранило ряд проблем с безопасностью при работе с произвольным HTML. Также это дало нам некоторые новые полезности, такие как нативный контроль над аудио, видео и формами для даты, цвета и другие вещи, которые неуклюже обрабатывались пользовательскими элементами управления на основе JavaScript. И, до сих пор, часто так и есть.)
Потом был CSS 3. Я не уверен, когда он начал существовать. Он появлялся медленно, изо всех сил, как птенец, вылупившийся из яйца чтобы действительно быть реализованным где угодно.
Я должен сделать много умных предположений здесь, но я думаю, что это началось с
Код:
border-radius
Код:
-moz-border-radiusВидите, собственный интерфейс Firefox отображается с помощью CSS. Если Mozilla захотела сделать что-то, что нельзя сделать с помощью CSS, они добавили собственное свойство с префиксом
Код:
-moz-Таким образом, я предполагаю, что толчок для CSS 3 действительно начался, когда Firefox взлетел, и дизайнеры обнаружили
Код:
-moz-border-radiusОбщие проблемы решались по одному за счет новых функций CSS, которые были объединены в новую версию CSS: CSS 3. Крупными были решения проблем проектирования, упомянутых ранее:
- Закругленные углы, обеспечиваемые границей радиуса.
- Градиенты, предоставляемые
Код:
linear-gradient()- Многочисленные фоны, которые не были насущной проблемой, но которые помогли сделать некоторые вещи проще.
- Прозрачность, обеспеченная
Код:
opacity- Коробка теней.
- Текстовые тени, которые были в CSS 2, но выпали в 2.1 и так и не были реализованы.
- Границы изображения, так что вы могли бы сделать даже более причудливые вещи, чем просто закругленные границы.
- Переходы и анимации, которые теперь можно легко выполнить, не требуя jQuery (или вообще никакого JS).
Код:
: nth-child ()- Трансформации. Чего ждать? Эта информация просочилась из SVG, которую также должны были реализовать браузеры, и которая в значительной степени основана на трансформациях. Код уже был там, так что, эй, теперь мы можем вращать вещи с помощью CSS! Не мог сделать это раньше. Здорово.
- Веб-шрифты, которые были в CSS в течение некоторого времени, но только когда-либо реализовывались в IE и только с некоторым тупым DRM-загруженным форматом шрифтов. Теперь мы не были ограничены четырьмя плохими шрифтами, которые поставляются с Windows, и которые никто больше не имеет!
Это было довольно здорово! Они не решали никаких проблем с макетом, но решали эстетические проблемы, с которыми дизайнеры неуклюже работали, используя множество изображений и / или JavaScript. Это означало меньше материалов для загрузки и больше текста, используемого вместо изображений, оба из которых были довольно хороши для Интернета.
Главная ирония в том, что все, что вы могли сделать с этими функциями, почти сразу вышло из моды, и теперь мы снова вернулись к плоским прямоугольникам.
Адский префиксинг браузера
Увы! Все было не так с миром.
Я полагаю, что некоторые из этих новых штуковин были изначально разработаны поставщиками браузеров и имели префикс. Некоторые более поздние были разработаны комитетом CSS, но реализованы браузерами, в то время как дизайн все еще находился в движении, и поэтому также имел префикс.
Так начался префикс адский, который продолжается и по сей день.
У Mozilla был
Код:
-moz-border-radius
Код:
-webkit-border-radius
Код:
border-radius
Код:
element {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}Первые два сделали эффект действительно работающим в текущих браузерах, а последний был ориентирован на будущее: когда браузеры реализовали реальное правило и отбросили префиксные, оно вступило во владение.
Вам приходилось делать это каждый раз, потому что CSS не является языком программирования и не имеет макросов, функций или чего-то подобного. Иногда Opera и IE имеют свои собственные реализации с префиксами
Код:
-o-
Код:
-ms-И множество людей, ну, все испортили. Я не могу винить их слишком сильно. Я имею в виду, это отстой. Но на достаточном количестве страниц использовались только префиксные формы, а не окончательная форма, поэтому браузеры должны были поддерживать префиксную форму дольше, чем им хотелось бы, чтобы избежать взлома. И если префиксная форма все еще работает и это то, что вы привыкли писать, то, возможно, вы все равно не будете беспокоиться о ней без префикса.
Хуже того, некоторые люди использовали бы только ту форму, которая работала в их любимом браузере. Это стало особенно плохо с ростом мобильных веб-браузеров. Встроенные браузеры на iOS и Android - Safari (WebKit) и Chrome (первоначально WebKit, теперь - форк), поэтому вам нужно только «использовать» свойства
Код:
-webkit-Эй, помнишь весь этот разгром с IE 6? Ну вот опять! Достаточно плохо, что в конечном итоге Mozilla решила реализовать ряд свойств
Код:
-webkit-
Код:
-webkit-text-strokeБолее того, текущий разветвленный движок Chrome называется Blink, поэтому технически он также не должен использовать свойства
Код:
-webkit-В настоящее время производители браузеров в значительной степени отказались от префиксов; вместо этого они скрывают экспериментальные функции за флагами (поэтому они будут работать только на компьютере разработчика), а новые функции теоретически разработаны так, чтобы они были меньше и их легче было стабилизировать.
Этот беспорядок был, вероятно, огромным мотивирующим фактором для разработки Sass и LESS, двух языков, которые производят CSS. Или ... два CSS-препроцессора, может быть. У них очень похожие цели: добавлять переменные, функции и некоторые макросы в CSS, что позволяет исключить множество повторений, взломов браузера и прочую ерунду из ваших таблиц стилей. Черт, этот блог все еще использует SCSS, хотя его использование постепенно уменьшалось с течением времени.
Flexbox
Но потом, как ангел, спустился с небес… flexbox.
Flexbox существует уже давно - якобы он частично поддерживал Firefox 2 еще в 2006 году! Он прошел несколько несовместимых пересмотров и потребовались годы, чтобы стабилизироваться. Тогда IE потребовалось много времени, чтобы реализовать его, и вы действительно не хотите полагаться на инструменты верстки, которые работают только для половины вашей аудитории. Лишь относительно недавно (2015? Позже?) Flexbox получил достаточно широкую поддержку для безопасного использования. И я могу поклясться, что до сих пор сталкиваюсь с людьми, чей нынешний Safari вообще не распознает его без префиксов, хотя Safari якобы отбросил префиксы пять лет назад ...
В любом случае, flexbox - это реализация CSS довольно распространенного инструмента макета GUI: у вас есть родитель с несколькими дочерними элементами, и у родительского элемента есть некоторое доступное пространство, и он автоматически распределяется между дочерними элементами.
Общая идея заключается в том, что браузер вычисляет, сколько места имеет родительский элемент, и «начальный размер» каждого дочернего элемента, вычисляет, сколько дополнительного пространства есть, и распределяет его в соответствии с гибкостью каждого дочернего элемента. Подумайте о панели инструментов: вы можете захотеть, чтобы каждая кнопка имела фиксированный размер, но вы хотите добавить разделители, которые разделяют любой оставшийся пробел в равной степени.
Как только это будет сделано, в вашем распоряжении также будет несколько вариантов: вместо этого вы можете распределить дополнительное пространство между детьми, вы можете попросить детей растягиваться до одинаковой высоты или выравнивать их различными способами, и вы даже можете сделать так, чтобы они были объединены в несколько рядов, если они не подходят всем!
С этим мы можем сделать еще одну трещину в этой сетке миниатюр:
Код:
.thumbnail-grid {
display: flex;
flex-wrap: wrap;
}
.thumbnail-grid li {
flex: 1 0 250px;
}…почти. По-прежнему существует проблема, заключающаяся в том, что слишком широкие ячейки будут разбивать сетку, поскольку это все еще горизонтальный ряд, обернутый в несколько независимых линий. Это чертовски круто и решает ряд других проблем с макетом. Конечно, это достаточно хорошо. Если ...?
Я бы сказал, что массовое внедрение flexbox положило начало современной эре CSS. Но была одна давняя проблема ...
Медленая, агонизирующая смерть IE
У IE 6 ушло много времени, чтобы уйти. Доля не упала ниже 10% рынка (все еще огромная доля) до начала 2010 года или около того.
Firefox достиг 1.0 в конце 2004 года. IE 7 не был выпущен до двух лет спустя, он предлагал лишь скромные улучшения, он страдал от проблем совместимости с вещами, созданными для IE 6, и несогласных с IE 6 (многие из которых не были Computer Люди) вообще не видел причин для обновления. Vista поставлялась с IE 7, но Vista была своего рода провалом - я не верю, что она когда-либо была близка к обгону XP.
К другим факторам относились корпоративные ИТ-политики, которые часто принимают форму «никогда ничего не обновлять» - и часто по веской причине, поскольку я слышал бесконечные истории о внутренних приложениях, которые работали только в IE 6 по всевозможным ужасающим причинам. Затем была вся Южная Корея, которая по закону была обязана использовать IE 6, потому что они законодательно закрепили некоторые требования безопасности, которые могли быть реализованы только с помощью элемента управления ActiveX IE 6.
Таким образом, если вы поддерживали веб-сайт, который использовался - или, что еще хуже, требовался - людьми, которые работали на бизнес или жили в других странах, вы в значительной степени застряли с поддержкой IE 6. Люди, делающие небольшие персональные инструменты и сайты, рано отказались от совместимости с IE 6, и намазали их сайты все более и более противными баннерами, дразнящими тех, кто осмелился появиться, используя его ... но если бы вы были чьим-то боссом, почему бы вам сказать им, что это нормально, если отбросить 20% вашей потенциальной аудитории? Просто работай усерднее!
Напряжение росло с годами, так как CSS стал более способным, а IE 6 оставался якорем. Он по-прежнему даже не понимал PNG альфа без обходных путей, и между тем мы начинали получать более важные функции, такие как нативное видео в HTML5. Обходные пути усложнились, а список функций, которые вы просто не могли использовать, увеличился. (Я покажу вам, как выглядит мой блог в IE 6, но я не думаю, что он может даже подключиться - поддержка TLS, которую он поддерживает, настолько древняя и сломанная, что на большинстве серверов она отключена!)
Кстати, приветствую некоторых людей из команды YouTube, которые в июле 2009 года добавили предупреждающий баннер, призывающий пользователей IE 6 переключаться на что-либо еще, не спрашивая ни у кого одобрения. «В течение одного месяца ... более 10 процентов мирового трафика IE6 сократилось». Не все герои носят накидки.
Я бы отметил начало конца как день, когда YouTube фактически прекратил поддержку IE 6 - 13 марта 2010 года, почти через девять лет после его выпуска. Я не знаю, какое прямое влияние YouTube оказывает на корпоративных пользователей или правительство Южной Кореи, но огромная веб-компания, отказавшаяся от всего браузера, посылает довольно сильное сообщение.
Конечно, были и другие версии IE, и многие из них сами по себе были беспорядочными головными болями. Но каждый последующий стал менее болезненным, и в настоящее время вам даже не нужно слишком много думать о тестировании в IE (теперь Edge). Как раз вовремя Microsoft откажется от собственного движка рендеринга и превратит свой браузер в клон Chrome.
Сейчас
CSS довольно хорош сейчас. Тебе не нужны странные чертовы хаки, чтобы просто поставить вещи рядом друг с другом. Инструменты для разработки в браузере уже встроены и потрясающе - Firefox начал специально предупреждать вас, когда некоторые свойства CSS не вступят в силу из-за ценностей других! Непонятные неявные побочные эффекты, такие как «контексты стека» (какими бы они ни были), теперь можно задавать явно, с такими свойствами, как
Код:
isolation: isolateТак много вещей, которые раньше были невозможны или болезненны или требовали неуклюжих плагинов, теперь поддерживаются изначально - аудио, видео, пользовательские рисунки, 3D-рендеринг ... не говоря уже об огромных эргономических улучшениях JavaScript.
Сеть по-прежнему немного катастрофична. Многие люди даже не знают, что flexbox и grid теперь поддерживаются почти повсеместно; но учитывая, сколько времени понадобилось, чтобы перейти от ранних спецификаций к широкой реализации, я не могу их винить. Вчера я видел новый небольшой сайт, который состоял в основном из огромного списка «миниатюр» различной ширины, и в нем использовались поплавки! Даже встроенный блок! Я не знаю, как нам удалось рассказать всем обо всех взломах, необходимых для того, чтобы это работало, но почему-то не получил ни слова о flexbox.
Но гораздо хуже, чем это: я все еще регулярно сталкиваюсь с сайтами, которые делают весь макет своей страницы с помощью JavaScript. Если вы используете uMatrix, ваш первый опыт будет с кучей текста, перекрывающим кучу другого текста. Конечно, это шаг назад? Что вы делаете, что ваш заголовок и боковая панель могут быть правильно выложены только при выполнении кода? Не похоже, что страница загружается без CSS - по умолчанию ничто в обычном HTML не будет перекрываться!
И еще есть мобильная сеть, которая, несмотря на все благие намерения, оказалась неудачной. Идея заключалась в том, что вы можете использовать медиазапросы CSS, чтобы разместить свой обычный сайт на экране телефона, но вместо этого большинство крупных сайтов имеют совершенно разные мобильные версии. Это означает, что либо на мобильном сайте отсутствует куча важных функций, и мне все равно придется неловко перемещаться по нему по телефону, либо сайт на рабочем столе полон дерьма, которое на самом деле никому не нужно.
(Между тем, собственные версии Google Документов / Листов / и т.д. для Android имеют около 5% возможностей веб-версий? Не знаете, что с этим делать.)
Хм. Настоятельно рассматриваю возможность написать что-то более подробное об улучшениях CSS со времен Firefox 3, аналогично тому, которое я написал для JavaScript. Но этот пост достаточно длинный.
Я не знаю, что будет дальше в CSS, особенно сейчас, когда flexbox и grid решили все наши проблемы. Я смутно осознаю, что делается некоторая работа над более обширной поддержкой математики и, возможно, некоторые функции для изменения цвета, как в Sass. Существует API рисования, который позволяет создавать фоновые изображения на лету с помощью JavaScript, используя API Canvas, что… довольно много. По-видимому, теперь в спецификации можно использовать attr () (который оценивается как значение атрибута HTML) в качестве значения для любого свойства, которое кажется классным и может даже позволить полностью реализовать таблицы HTML в CSS, но вы можете сделать То же самое с переменными.
Ты все еще здесь? Все закончилось. Иди домой.
И, возможно, отойди от монокультуры Blink и используй Firefox, в том числе на вашем телефоне, если только по какой-то причине вы не используете iPhone, который запрещает другие браузерные движки, что гораздо хуже, чем когда-либо делал Microsoft, но мы просто по каким-то причинам принимаем это.
Источник:
Ссылка скрыта от гостей