В двух предыдущих частях я забывал указывать автора оригинала(уже нет), потому:
А мы продолжим
Начало CSS макета
Back to CSS!
Вы начинающий веб-дизайнер. По какой-то причине вы хотите попробовать использовать эту CSS-функцию для разметки всей вашей страницы, даже если она явно предназначена только для цветов и прочего. Чем ты занимаешься?
Как я уже упоминал ранее, ваша основная проблема - поставить вещи рядом друг с другом. Поместить вещи друг на друга не проблема - это нормальное поведение HTML. Единственная причина, по которой все используют таблицы, заключается в том, что вы можете вставлять элементы в ячейки таблицы и размещать их рядом, в столбцах.
Ну, таблицы, кажется, нет. В CSS 2 добавлены некоторые режимы отображения элементов, которые соответствуют частям таблицы, но чтобы использовать их, вы должны иметь те же три уровня вложенности, что и реальные таблицы: сама таблица, затем строка, затем ячейка. Это не кажется огромным шагом вперед, и в любом случае IE не поддержит их до далекого будущего.
Есть такая позиция, но, похоже, она часто перекрывает вещи, а не пересекается. Хм.
Что это оставляет?
Действительно, только один инструмент:
Я сказал, что float предназначен для «вытягивающих» изображений в стиле журнала, и это правда, но CSS определил его довольно обобщенно. В принципе, это может быть применено к любому элементу. Если вы хотите боковую панель, вы можете сказать, что она плавает влево и составляет 20% ширины страницы, и вы получите что-то вроде этого:
Увы! Если бы текст вашей страницы был длиннее боковой панели, он бы обернулся под боковой панелью, и иллюзия развеялась бы. Но нет проблем. В CSS указывалось, что плавающие объекты не оборачиваются, поэтому все, что вам нужно было сделать, это также плавающее тело!
Этот подход работал, но его ограничения были гораздо более очевидными, чем у таблиц. Например, если вы добавили нижний колонтитул, он будет пытаться вписаться в правую часть основного текста - помните, что все это «потянет» поплавки, поэтому, что касается браузера, «курсор» все еще в пике. Так что теперь вам нужно использовать
, который поднимает элемент ниже всех float, чтобы это исправить. И если вы сделали боковую панель шириной 20%, а тело шириной 80%, то любое поле между ними увеличит эти 100%, сделав страницу шире, чем область просмотра, так что теперь у вас есть уродливая горизонтальная полоса прокрутки, поэтому вы должны сделать какая-то глупая математика, чтобы исправить это. Если у вас есть границы или фоны в любой части, то было немного заметно, что они были разной высоты, так что теперь вы должны сделать что-то действительно гротескное, чтобы это исправить. И более добросовестные авторы заметили, что программы чтения с экрана будут читать всю боковую панель перед тем, как перейти к основному тексту, что является довольно грубой вещью для слепых посетителей, поэтому они придумали еще более сложные настройки, чтобы иметь макет из трех столбцов с средний столбец появляется первым в HTML.
Результатом стал дизайн, который выглядел хорошо, работал хорошо и масштабировался правильно, но подкреплен странным беспорядком CSS. Ничто из того, что вы писали, на самом деле не соответствовало тому, что вы хотели - это основные части вашего дизайна, а не одноразовые цитаты! Было трудно понять связь между CSS, связанным с макетом, и тем, что появляется на экране, и это станет намного хуже, прежде чем станет лучше.
Сетка миниатюр 2
Вооружившись новой игрушкой, мы можем улучшить эту сетку миниатюр. Оригинальный макет на основе таблицы, даже если вы не заботитесь о семантике тегов, был невероятно утомительным. Теперь мы можем сделать лучше!
Это мечта CSS: ваш HTML содержит данные страницы в какой-то разумной форме, а затем CSS описывает, как они на самом деле выглядят.
К сожалению, с плавающей точкой в качестве единственного доступного нам инструмента, результаты немного грубые. Эта новая версия лучше адаптируется к различным размерам экрана, но требует некоторых хаков: ячейки должны быть фиксированной высоты, центрирование всей сетки довольно сложно, а эффект сетки полностью разваливается с более широкими элементами. Становится ясно, что нам нужно что-то более похожее на таблицу, но с гибким количеством столбцов. Это просто притворяется.
Вы также нуждаетесь в этой странной вещи «clearfix», заклинании, которое стало бы позорным в течение этой эры. Помните, что float не перемещает «курсор» - ложная идея, которую я использую, но достаточно близко. Это означает, что этот <ul>, который заполнен только плавающими элементами, вообще не имеет высоты. Он заканчивается именно там, где он начинается, со всеми всплывающими миниатюрами, разливающимися под ним. Хуже того, поскольку любые последующие элементы не имеют плавающих братьев и сестер, они полностью игнорируют миниатюры и обычно визуализируются прямо из-под пустой «сетки», создавая перекрывающийся беспорядок!
Решение состоит в том, чтобы добавить фиктивный элемент в конец списка, который не занимает места, но имеет ясный CSS: и то и другое - уменьшая его ниже всех значений с плавающей точкой. Это эффективно подталкивает нижнюю часть
под всеми отдельными миниатюрами, поэтому она плотно прилегает к ним.
Браузеры позже будут поддерживать псевдоэлементы
и
«генерируемый контент», что позволит полностью избежать фиктивного элемента. Таблицы стилей с середины 00-х часто наполнялись такими вещами:
Тем не менее, это было лучше, чем таблицы.
DHTML
Вскоре в мир JavaScript, свойство newfangled position действительно дало нам возможность динамически выполнять некоторые операции с макетом. Я искренне против такой ереси, не в последнюю очередь потому, что никто никогда не делал это правильно, но это было приятно для некоторых игрушек.
Так началась эра «динамического HTML» - то есть HTML, на который повлиял JavaScript, термин, который полностью потерял популярность, потому что мы больше не можем даже создать чертовски статичный блог без JavaScript. В первые дни это было намного более безобидным, когда подростки ставили искры, которые тянулись за курсором мыши, или маленькие аналоговые часы, которые тикали в реальном времени.
Самым популярным источником этих вещей был
Но если вам не нравится копать, вот пример: каждый год (за исключением этого года, когда я забыл упс), я люблю добавлять конфетти и прочую ерунду в свой блог на мой день рождения. Я очень ленив, поэтому я начал эту традицию с использования сценария, который я нашел где-то, изначально предназначенного для снежинок. Он работает, помещая кучу изображений на странице, давая им положение: абсолютное и тщательно меняя их координаты снова и снова.
Сравните это с версией, которую я написал с нуля пару лет назад, в которой всего лишь чуть-чуть JS для настройки изображений, а затем позволяет браузеру анимировать их с помощью CSS. Это немного менее функционально, но позволяет браузеру делать всю работу, возможно, даже с аппаратным ускорением. Как далеко мы продвинулись.
Web 2.0
Темные времена не могут длиться вечно. Сочетание факторов потянуло нас к свету.
Одним из самых больших был Firefox - или, если вы были крутым, первоначально Phoenix, а затем Firebird - который достиг 1,0 в ноябре 2004 года и получил серьезный укус от IE. Это переписанное ядро браузера Netscape 6, сердце Mozilla Suite, было извлечено в автономный браузер. Оно было быстро, оно было просто, оно был намного более совместимым со стандартом, и абсолютно ничего из этого не имело значения.
Нет, Firefox действительно закрепился, потому что у него были вкладки. IE 6 не имел вкладок; Если вы хотите открыть вторую веб-страницу, вы открыли другое окно. Это чертовски отстой, чувак. Firefox был чудом.
Конечно, Firefox был не первым браузером с вкладками; они были у полного браузера Mozilla Suite, а у непонятной Оперы они были целую вечность. Но именно Firefox взлетел по разным причинам, не в последнюю очередь из-за того, что у него не было гигантского гребаного рекламного бара вверху, как у Opera.
Конечно, дизайнеры действительно настаивали на Firefox по стандартам. Одной из самых популярных и впечатляющих демонстраций стал тест Acid2, предназначенный для тестирования различных функций современных веб-стандартов. У него было преимущество в создании симпатичного смайлика при правильной отрисовке и чертового кошмарного адского пейзажа в IE 6. Ранний Firefox не был идеальным, но он, безусловно, был намного ближе, и вы могли видеть, как он прогрессирует, пока полностью не прийдет выпуск Firefox 3.
Также помогло, что у Firefox был более быстрый движок JavaScript, даже до того, как JIT завоевал популярность. Вот, как я помню, в IE 6 реализован getElementById путем итерации по всему документу, хотя идентификаторы уникальны. Посмотрите на некоторые старые объявления о выпуске jQuery; у них обычно есть некоторые диаграммы производительности, а все остальное абсолютно карликовое от IE 6 до 8.
Да, и там была целая вещь, где IE 6 представлял собой огромную дыру в безопасности, особенно с его собственной поддержкой произвольных двоичных компонентов, которые нуждались только в щелчке «да» в тайном диалоге, чтобы получить полный и неограниченный доступ к вашей системе. Это не помогало его.
В любом случае, с чем-то иным, кроме IE, занимающим серьезную долю рынка, даже самые лютые дизайнеры не могли просто ориентироваться на IE 6. Теперь была причина использовать строгий режим, причина заботиться о совместимости и стандартах, которым Firefox постоянно старался следовать, пока IE 6 оставался на прежнем уровне.
(Я бы сказал, что этот эффект открыл двери для продвижения OS Xа также для iPhone в целом. Я не шучу! Подумайте об этом; если бы браузер iPhone на самом деле не работал ни с чем потому что все по-прежнему ориентировались на IE 6, в основном это был более дорогой Palm. Помните, сначала Apple даже не хотела нативных приложений, она делала ставки на интернет.)
(Говоря об этом, Safari был выпущен в январе '03 на основе форка движка KHTML, используемого в браузере KDE Konqueror. Я думаю, что в то время я использовал KDE, так что это было очень увлекательно, но никто больше не заботился о OS X и ее доле рынка 2%.)
Еще один важный фактор появился в День дурака в апреле 2004 года, когда Google объявил о Gmail. Ха ха, смешная шутка Веб-почта, которая не ужасна? Молодец, Google.
Ой. Ох, блядь. О, они не шутят. Как, черт возьми, это вообще работает?
Ответ, как теперь знает каждый веб-разработчик, - XMLHttpRequest, названный так потому, что никто никогда не использовал его для запроса XML. Очевидно, он был изобретен Microsoft для использования с Exchange, а затем клонирован Mozilla, но я просто читаю это из Википедии, и вы можете сделать это самостоятельно.
Важно то, что он позволяет вам сделать HTTP-запрос из JavaScript. Теперь вы можете обновлять только часть страницы новыми данными, полностью в фоновом режиме, без перезагрузки. Никто не слышал об этом раньше, поэтому, когда Google бросил целый почтовый клиент на его основе, это было похоже на чертову волшебство.
Возможно, все это было ошибкой и привело к адскому будущему, где статические страницы загружают три абзаца текста в фоновом режиме, используя XHR без чёртовой причины, но это другой пост.
Аналогичным образом, в августе 2006 года было выпущено похожее чудо jQuery. Он не только продемонстрировал различия между API-интерфейсами JScript в IE и стандартными подходами, применяемыми всеми остальными (что ранее было сделано другими библиотеками), но также позволил очень легко работать с целыми группами элементов одновременно, что-то, что исторически было огромной болью в заднице. Теперь вы можете довольно легко применять CSS повсеместно из JavaScript!
Подожди, я слышу, как ты плачешь. Эти вещи о JavaScript! Разве это не пост о CSS?
Ты абсолютно прав! Я упоминаю о росте JavaScript, потому что я думаю, что это привело непосредственно к современному состоянию CSS, благодаря увеличению одного существенного фактора:
Амбиции
Firefox показал нам, что у нас могут быть браузеры, которые действительно улучшаются - каждое новое улучшение Acid2 было захватывающим. Gmail показал нам, что Интернет может сделать больше, чем просто показывать текст со снежинками впереди.
И люди начали испытывать зуд, чтобы стать модным.
Проблема заключалась в том, что браузеры еще не стали лучше. В некоторых отношениях Firefox был быстрее и более тесно соответствовал спецификации CSS, но в основном он не делал ничего такого, что браузеры не должны были уже делать. Только инструменты улучшились, и это в основном повлияло на JavaScript. CSS был статическим языком, поэтому вы не могли написать библиотеку, чтобы сделать его лучше. Генерация CSS с помощью JavaScript была возможной, но, черт возьми, это плохая идея.
Другая проблема заключалась в том, что CSS 2 был действительно хорош в оформлении прямоугольников. Это было хорошо в 90-х годах, когда каждая ОС имела эстетику прямоугольников, содержащих больше прямоугольников. Но сейчас мы были во времена Windows XP и OS X, где все было блестящим и глянцевым и сделанным из пышного пластика. Было немного неловко иметь закругленные углы и аккуратно закрашенные полосы в вашем файловом браузере и нигде в Интернете.
Так началось новое правление тьмы.
Ссылка скрыта от гостей
А мы продолжим
Начало CSS макета
Back to CSS!
Вы начинающий веб-дизайнер. По какой-то причине вы хотите попробовать использовать эту CSS-функцию для разметки всей вашей страницы, даже если она явно предназначена только для цветов и прочего. Чем ты занимаешься?
Как я уже упоминал ранее, ваша основная проблема - поставить вещи рядом друг с другом. Поместить вещи друг на друга не проблема - это нормальное поведение HTML. Единственная причина, по которой все используют таблицы, заключается в том, что вы можете вставлять элементы в ячейки таблицы и размещать их рядом, в столбцах.
Ну, таблицы, кажется, нет. В CSS 2 добавлены некоторые режимы отображения элементов, которые соответствуют частям таблицы, но чтобы использовать их, вы должны иметь те же три уровня вложенности, что и реальные таблицы: сама таблица, затем строка, затем ячейка. Это не кажется огромным шагом вперед, и в любом случае IE не поддержит их до далекого будущего.
Есть такая позиция, но, похоже, она часто перекрывает вещи, а не пересекается. Хм.
Что это оставляет?
Действительно, только один инструмент:
Код:
float
Код:
+---------+
| sidebar | Hello, and welcome to my website!
| |
+---------+
Код:
+---------+ +-----------------------------------+
| sidebar | | Hello, and welcome to my website! |
| | | |
+---------+ | Here's a longer paragraph to show |
| that my galaxy brain CSS float |
| nonsense prevents text wrap. |
+-----------------------------------+
Код:
clearРезультатом стал дизайн, который выглядел хорошо, работал хорошо и масштабировался правильно, но подкреплен странным беспорядком CSS. Ничто из того, что вы писали, на самом деле не соответствовало тому, что вы хотели - это основные части вашего дизайна, а не одноразовые цитаты! Было трудно понять связь между CSS, связанным с макетом, и тем, что появляется на экране, и это станет намного хуже, прежде чем станет лучше.
Сетка миниатюр 2
Вооружившись новой игрушкой, мы можем улучшить эту сетку миниатюр. Оригинальный макет на основе таблицы, даже если вы не заботитесь о семантике тегов, был невероятно утомительным. Теперь мы можем сделать лучше!
Код:
<ul class="thumbnail-grid">
<li><img src="..."><br>caption</li>
<li><img src="..."><br>caption</li>
<li><img src="..."><br>caption</li>
...
</ul>К сожалению, с плавающей точкой в качестве единственного доступного нам инструмента, результаты немного грубые. Эта новая версия лучше адаптируется к различным размерам экрана, но требует некоторых хаков: ячейки должны быть фиксированной высоты, центрирование всей сетки довольно сложно, а эффект сетки полностью разваливается с более широкими элементами. Становится ясно, что нам нужно что-то более похожее на таблицу, но с гибким количеством столбцов. Это просто притворяется.
Вы также нуждаетесь в этой странной вещи «clearfix», заклинании, которое стало бы позорным в течение этой эры. Помните, что float не перемещает «курсор» - ложная идея, которую я использую, но достаточно близко. Это означает, что этот <ul>, который заполнен только плавающими элементами, вообще не имеет высоты. Он заканчивается именно там, где он начинается, со всеми всплывающими миниатюрами, разливающимися под ним. Хуже того, поскольку любые последующие элементы не имеют плавающих братьев и сестер, они полностью игнорируют миниатюры и обычно визуализируются прямо из-под пустой «сетки», создавая перекрывающийся беспорядок!
Решение состоит в том, чтобы добавить фиктивный элемент в конец списка, который не занимает места, но имеет ясный CSS: и то и другое - уменьшая его ниже всех значений с плавающей точкой. Это эффективно подталкивает нижнюю часть
Код:
<ul>Браузеры позже будут поддерживать псевдоэлементы
Код:
:: before
Код:
:: after
Код:
.thumbnail-grid::after {
content: '';
display: block;
clear: both;
}DHTML
Вскоре в мир JavaScript, свойство newfangled position действительно дало нам возможность динамически выполнять некоторые операции с макетом. Я искренне против такой ереси, не в последнюю очередь потому, что никто никогда не делал это правильно, но это было приятно для некоторых игрушек.
Так началась эра «динамического HTML» - то есть HTML, на который повлиял JavaScript, термин, который полностью потерял популярность, потому что мы больше не можем даже создать чертовски статичный блог без JavaScript. В первые дни это было намного более безобидным, когда подростки ставили искры, которые тянулись за курсором мыши, или маленькие аналоговые часы, которые тикали в реальном времени.
Самым популярным источником этих вещей был
Ссылка скрыта от гостей
, сайт, который чудесным образом все еще существует и, вероятно, содержит кучу игрушек, которые не обновлялись с начала 00-х годов.Но если вам не нравится копать, вот пример: каждый год (за исключением этого года, когда я забыл упс), я люблю добавлять конфетти и прочую ерунду в свой блог на мой день рождения. Я очень ленив, поэтому я начал эту традицию с использования сценария, который я нашел где-то, изначально предназначенного для снежинок. Он работает, помещая кучу изображений на странице, давая им положение: абсолютное и тщательно меняя их координаты снова и снова.
Сравните это с версией, которую я написал с нуля пару лет назад, в которой всего лишь чуть-чуть JS для настройки изображений, а затем позволяет браузеру анимировать их с помощью CSS. Это немного менее функционально, но позволяет браузеру делать всю работу, возможно, даже с аппаратным ускорением. Как далеко мы продвинулись.
Web 2.0
Темные времена не могут длиться вечно. Сочетание факторов потянуло нас к свету.
Одним из самых больших был Firefox - или, если вы были крутым, первоначально Phoenix, а затем Firebird - который достиг 1,0 в ноябре 2004 года и получил серьезный укус от IE. Это переписанное ядро браузера Netscape 6, сердце Mozilla Suite, было извлечено в автономный браузер. Оно было быстро, оно было просто, оно был намного более совместимым со стандартом, и абсолютно ничего из этого не имело значения.
Нет, Firefox действительно закрепился, потому что у него были вкладки. IE 6 не имел вкладок; Если вы хотите открыть вторую веб-страницу, вы открыли другое окно. Это чертовски отстой, чувак. Firefox был чудом.
Конечно, Firefox был не первым браузером с вкладками; они были у полного браузера Mozilla Suite, а у непонятной Оперы они были целую вечность. Но именно Firefox взлетел по разным причинам, не в последнюю очередь из-за того, что у него не было гигантского гребаного рекламного бара вверху, как у Opera.
Конечно, дизайнеры действительно настаивали на Firefox по стандартам. Одной из самых популярных и впечатляющих демонстраций стал тест Acid2, предназначенный для тестирования различных функций современных веб-стандартов. У него было преимущество в создании симпатичного смайлика при правильной отрисовке и чертового кошмарного адского пейзажа в IE 6. Ранний Firefox не был идеальным, но он, безусловно, был намного ближе, и вы могли видеть, как он прогрессирует, пока полностью не прийдет выпуск Firefox 3.
Также помогло, что у Firefox был более быстрый движок JavaScript, даже до того, как JIT завоевал популярность. Вот, как я помню, в IE 6 реализован getElementById путем итерации по всему документу, хотя идентификаторы уникальны. Посмотрите на некоторые старые объявления о выпуске jQuery; у них обычно есть некоторые диаграммы производительности, а все остальное абсолютно карликовое от IE 6 до 8.
Да, и там была целая вещь, где IE 6 представлял собой огромную дыру в безопасности, особенно с его собственной поддержкой произвольных двоичных компонентов, которые нуждались только в щелчке «да» в тайном диалоге, чтобы получить полный и неограниченный доступ к вашей системе. Это не помогало его.
В любом случае, с чем-то иным, кроме IE, занимающим серьезную долю рынка, даже самые лютые дизайнеры не могли просто ориентироваться на IE 6. Теперь была причина использовать строгий режим, причина заботиться о совместимости и стандартах, которым Firefox постоянно старался следовать, пока IE 6 оставался на прежнем уровне.
(Я бы сказал, что этот эффект открыл двери для продвижения OS Xа также для iPhone в целом. Я не шучу! Подумайте об этом; если бы браузер iPhone на самом деле не работал ни с чем потому что все по-прежнему ориентировались на IE 6, в основном это был более дорогой Palm. Помните, сначала Apple даже не хотела нативных приложений, она делала ставки на интернет.)
(Говоря об этом, Safari был выпущен в январе '03 на основе форка движка KHTML, используемого в браузере KDE Konqueror. Я думаю, что в то время я использовал KDE, так что это было очень увлекательно, но никто больше не заботился о OS X и ее доле рынка 2%.)
Еще один важный фактор появился в День дурака в апреле 2004 года, когда Google объявил о Gmail. Ха ха, смешная шутка Веб-почта, которая не ужасна? Молодец, Google.
Ой. Ох, блядь. О, они не шутят. Как, черт возьми, это вообще работает?
Ответ, как теперь знает каждый веб-разработчик, - XMLHttpRequest, названный так потому, что никто никогда не использовал его для запроса XML. Очевидно, он был изобретен Microsoft для использования с Exchange, а затем клонирован Mozilla, но я просто читаю это из Википедии, и вы можете сделать это самостоятельно.
Важно то, что он позволяет вам сделать HTTP-запрос из JavaScript. Теперь вы можете обновлять только часть страницы новыми данными, полностью в фоновом режиме, без перезагрузки. Никто не слышал об этом раньше, поэтому, когда Google бросил целый почтовый клиент на его основе, это было похоже на чертову волшебство.
Возможно, все это было ошибкой и привело к адскому будущему, где статические страницы загружают три абзаца текста в фоновом режиме, используя XHR без чёртовой причины, но это другой пост.
Аналогичным образом, в августе 2006 года было выпущено похожее чудо jQuery. Он не только продемонстрировал различия между API-интерфейсами JScript в IE и стандартными подходами, применяемыми всеми остальными (что ранее было сделано другими библиотеками), но также позволил очень легко работать с целыми группами элементов одновременно, что-то, что исторически было огромной болью в заднице. Теперь вы можете довольно легко применять CSS повсеместно из JavaScript!
Подожди, я слышу, как ты плачешь. Эти вещи о JavaScript! Разве это не пост о CSS?
Ты абсолютно прав! Я упоминаю о росте JavaScript, потому что я думаю, что это привело непосредственно к современному состоянию CSS, благодаря увеличению одного существенного фактора:
Амбиции
Firefox показал нам, что у нас могут быть браузеры, которые действительно улучшаются - каждое новое улучшение Acid2 было захватывающим. Gmail показал нам, что Интернет может сделать больше, чем просто показывать текст со снежинками впереди.
И люди начали испытывать зуд, чтобы стать модным.
Проблема заключалась в том, что браузеры еще не стали лучше. В некоторых отношениях Firefox был быстрее и более тесно соответствовал спецификации CSS, но в основном он не делал ничего такого, что браузеры не должны были уже делать. Только инструменты улучшились, и это в основном повлияло на JavaScript. CSS был статическим языком, поэтому вы не могли написать библиотеку, чтобы сделать его лучше. Генерация CSS с помощью JavaScript была возможной, но, черт возьми, это плохая идея.
Другая проблема заключалась в том, что CSS 2 был действительно хорош в оформлении прямоугольников. Это было хорошо в 90-х годах, когда каждая ОС имела эстетику прямоугольников, содержащих больше прямоугольников. Но сейчас мы были во времена Windows XP и OS X, где все было блестящим и глянцевым и сделанным из пышного пластика. Было немного неловко иметь закругленные углы и аккуратно закрашенные полосы в вашем файловом браузере и нигде в Интернете.
Так началось новое правление тьмы.