Статьи

Подкаст SitePoint № 127: хитрости CSS с Крисом Койером

Эпизод 127 подкаста SitePoint теперь доступен! На этой неделе наш постоянный интервьюер Луи Симоне ( @rssaddict ) берет интервью у Криса Койера ( @chriscoyier ), который работает в Wufoo и управляет сайтом CSS-Tricks.com .

Скачать этот эпизод

Вы можете скачать этот эпизод в виде отдельного файла MP3. Вот ссылка:

  • Подкаст SitePoint № 127: хитрости CSS с Крисом Койером (MP3, 43:11, 41,5 МБ)

Резюме Эпизода

Луи и Крис рассказывают о текущем состоянии спецификации CSS3, о некоторых классных идеях и о том, как работа Криса в Wufoo связана с этим. Они охватывают такие области CSS, как классы песо с переключателями и многое другое!

Просмотрите полный список ссылок, указанных в шоу, по адресу http://delicious.com/sitepointpodcast/127 .

Стенограмма интервью

Луи: Здравствуйте и добро пожаловать в еще один эпизод подкаста SitePoint, на этой неделе в шоу у нас есть еще один потрясающий гость, Крис Койер, который является человеком, стоящим за CSS-Tricks, веб-сайтом, который просто полон интересных трюков CSS, я не знать, есть ли другой способ описать это; Я думаю, что большинство наших слушателей будут знакомы, привет Крис.

Крис: Эй, как дела у всех? Спасибо, что приняли меня, Луи.

Луи: Абсолютно. Здорово, что ты на связи. Итак, для тех, кто не знаком с CSS-хитростями, и я думаю, что большинство нашей аудитории будет знакомо с ним, но всем, кто не знаком с вами, вы хотите немного рассказать нам о том, что такое сайт и, возможно, как вы начали?

Крис: Эй, конечно, так что это CSS-tricks.com , это своего рода живое доказательство того, что у вас может быть URL с чертой в нем; это возможно (смех). Нет, просто я веб-дизайнер и уже несколько лет, CSS-хитрости — это, я думаю, блог является его основным компонентом, и мне просто нравится блог о вещах, связанных с веб-дизайном; это называется CSS-Tricks, что, возможно, немного глупо, но это было так долго, что —

Луи: Слишком поздно возвращаться.

Крис: — Я никогда не задумывался об этом. Я много пишу о CSS, но этим не ограничиваюсь, поэтому, если кому-то нравится веб-дизайн, но CSS не моя любимая вещь, там есть вещи для всех. Но я также делаю скриншоты, и есть форумы сообщества, где можно получить помощь по веб-дизайну, и да, это было около четырех лет, и это часть моей жизни.

Луи: Круто. Я думаю, вы недавно изменили дизайн, потому что я обычно читаю его через Google Reader, и незадолго до вчерашнего шоу я зашла на сайт, чтобы посмотреть, что нового, и это поразило меня, потому что оно полностью отличалось от того, когда я в последний раз была там; как давно был редизайн?

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

Луи: Это очень хорошо для довольно значительного дизайна блога, в котором много мелких полезных функций, это большой объем работы.

Крис: Да, это было, я очень доволен этим, я тоже был доволен этим и раньше, но вы знаете, какое-то проклятие дизайнера всегда хотело изменить его и думать, что вы можете добиться большего, и это приятно иметь такую ​​игровую площадку, чтобы просто — потому что никто не дышит мне в шею, я могу делать все, что захочу на этом сайте, так что я надеялся выполнить несколько крутых новых адаптивных трюков и сделать их как можно более читабельными, и это просто весело.

Луи: Это действительно мило.

Крис: это всегда сложная задача; Я считаю, что это большое дело, я недавно думал об этом, это сайты, которые должны быть перепроектированы вокруг рекламы и, как не просто одно маленькое объявление, но я, очевидно, получаю доход от сайта, поэтому должно быть достаточно экрана недвижимости, чтобы поместиться в достаточном количестве рекламы, и это действительно другой, вы знаете, довольно ограничивающий фактор при редизайне сайта.

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

Крис: Да, круто, спасибо, это цель, ты знаешь; сделайте так, чтобы они были там, и чтобы они были видны, но чтобы они не раздражали вас, и столько страниц, сколько вы можете, и все такое, о чем стоит подумать.

Луи: Вы упомянули отзывчивость, а я на самом деле не делал растяжку окна браузера, так что мне придется с этим поиграть. Это что-то вроде пасхального яйца для веб-дизайнеров, когда вы перетаскиваете окно и элементы перестраиваются в адаптивной манере, и они делают это своего рода анимацией; это все CSS анимации?

Крис: Да, да, просто небольшой трюк, с которым мне просто нужно было по-настоящему поиграть, и это совсем не сложно, просто большинство людей знают, что используют медиа-запросы и что некоторые CSS-приложения применяются только в этом Например, если браузер имеет разную ширину, большинство людей знают об этом, я имею в виду, что если вы не просто пользуетесь Google для медийных запросов в CSS, и большинство людей также знают об анимации и переходах, это просто способ анимации между двумя состояниями чего-то, это переход, но вы можете объединить эти две вещи вместе, просто поместить переход на элемент, а затем, когда его значения меняются, как в случае окна поиска вверху, он просто меняет левый его значение позиции, потому что у него есть переход, когда новый CSS из медиа-запроса имеет место, он анимируется на новую позицию, так что это просто своего рода объединение этих двух идей.

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

Крис: Да, полностью. Аргумент был бы, что это немного глупо, вы знаете, это просто баловство или что-то еще, (смех), но для сайта для веб-дизайнеров это —

Луи: Да, именно здесь можно экспериментировать с этими вещами. И одна из вещей, о которых я хотел бы поговорить с вами, — это впечатляющее чтение CSS-трюков за эти годы, сколько из этих маленьких идей, которые вы можете согнуть CSS в соответствии со своей волей, которые вы смогли придумать с годами, и любой, кто был в веб-дизайне в течение долгого времени, помнит, что во времена IE 5 и IE 6 были все эти ошибки, а затем это были методы CSS, которые были бы своего рода обходными путями для разных вещей или заставлял вещи работать на разных браузерах или на том-то и том-то, а потом он как бы угас, когда стандарты стабилизировались, и люди перестали так много писать о CSS, потому что в технологиях просто не было столько полезных ископаемых, чтобы их добывать что вы могли бы придумать, но я думаю, что с вашего сайта это точно не так, вы просто продолжаете придумывать классные трюки.

Крис: (смеется) Спасибо. Да, это было так, я чувствую, что был долгий период, когда сотни людей писали о CSS, да, я даже не могу выбросить годы, но я думаю, что я знаю, что вы имеете в виду, а потом был длинный Застойный период, когда даже некоторые из этих людей были похожи, ах, я больше не пишу о CSS, это вроде как все сказано, вы знаете. В то время это могло быть правдой, поэтому было затишье, и я чувствую, что в самом начале затишья, когда начались CSS-трюки, и я был таким новичком, я, как и все, не знаю Забота, я напишу все это снова (смех). И теперь это совсем не так, сейчас мы переживаем настоящий ренессанс написания CSS. Из-за всего CSS3 и HTML5, а также из-за всего этого, и того факта, что браузеры итерируют намного быстрее, чем они были во время этого затишья, и теперь есть еще что сказать о CSS, так что есть что-то новое люди на сцене делают то, что замечательно!

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

Крис: Да, и тоже становится лучше, потому что сейчас есть даже вещи, которые не так хороши, которые становятся лучше, ты знаешь. В мире CSS, работающем со всеми этими замечательными CSS3 вещами, которые у нас есть, я уверен, что вы это прекрасно понимаете, есть все, что вам нужно написать трансформацию пять раз с префиксами вендоров и тому подобным, и тому подобное жаловаться на это, и это целая другая тема, но это будет становиться лучше, нам придется делать все меньше и меньше по мере того, как идут дела, появляются новые макеты, которые делают нашу работу все проще и проще; сейчас как будто это здорово и становится все лучше.

Луи: Да, абсолютно. Так как вы рассказали об этом, есть ли что-то особенное — вы, вероятно, уделяете больше внимания эволюционирующему ландшафту браузеров, чем я, каким вещам, которые появляются в CSS, вы восхищаетесь; либо что-то, что уже есть, но не очень хорошо поддерживается, но поддержка появляется, или что-то, что недавно было добавлено в спецификации.

Крис: Да, есть много, как будто есть много разных макетов, которые бывают в разных формах, например, готовы. Я думаю, что сейчас больше всего внимания уделяется FlexBox, и это своего рода способ, когда у вас есть три деления внутри другого, и вы просто говорите: «Я хочу, чтобы эти три деления растянулись настолько широко, насколько это необходимо для Заполните это пространство », это было трудным делом с точки зрения CSS в прошлом, и это стало тривиально легко с помощью FlexBox, и это здорово и здорово, что они его используют, а поддержка браузера на самом деле довольно глубокая для удивительно глубокая проблема в том, что он полностью переписан, так что выйдет новая версия FlexBox, а затем в течение ряда лет должна будет появиться куча устаревшей поддержки, но в конечном итоге мы Собираетесь все, чтобы начать использовать новый синтаксис или что угодно. Это все еще, вероятно, довольно сильный претендент на макет, есть такой, который называется Position Floats, и вы знаете, как работает абсолютное позиционирование, надеюсь, многие люди, слушающие этот подкаст, понимают, что, верно, вы просто —

Луи: Да, я думаю, что все должны быть в порядке с этим, да.

Крис: Да, круто, вы можете абсолютно позиционировать что-то и использовать это. Скажем, я хочу разместить его здесь абсолютно так, чтобы он обычно вынимался из потока документа, чтобы текст как бы игнорировал его и просто проходил по нему, а затем применял к нему float, какой текст обернул бы вокруг него, что маловероятно, что один из них будет принят многими используемыми браузерами, но это круто, я думаю, что мы все можем согласиться, как мальчик, что было бы здорово, если бы я мог расположить что-то прямо в середине блока текста и получить текст полностью просто оберните его, не полагаясь на сумасшедшие хаки и прочее. Появится один под названием StAX, вероятно, это будет шесть разных модулей макета, которые похожи на различные черновые форматы, поскольку спецификации, которые, W3C, находятся в стадии разработки, и нам нужны браузеры, чтобы начать реализовывать их со своими префикс поставщика, и мы начинаем играть с ними и давать отзывы, а потом мы просто играем в игру, из которых начинают становиться популярными, о каких люди чаще всего пишут в блогах, какие люди пытаются внедрить в самые современные разработки больше всего, а затем это те, которые авторы спецификаций будут тогда больше всего взволнованы и будут дорабатывать все больше и больше, и все больше браузеров будут реализовывать, и это будет формировать будущее дизайна. Итак, когда вы дизайнер и играете с этим новым материалом, вы изучаете его, читаете об этом и делаете маленькие jsFiddle или что-то еще, вы влияете на будущее дизайна; это не похоже на это, кажется, что вы просто дурачились, но каждый маленький человек на переднем крае имеет свое мнение, в каких модулях, подобных этому, оказываются настоящими.

Луи: Это отличный способ взглянуть на это. Интересно видеть, что вы говорите обо всех этих предложениях по макету, которые действительно интересны, и я думаю, что любой, кто боролся с макетами поплавка в течение любого промежутка времени, будет действительно доволен этим, но интересно, что первые набеги на это Новый мир CSS со стороны браузеров и спецификаций был своего рода декоративными вещами, поэтому такие вещи, как тени от ящиков и закругленные углы и шрифты и все такое, но основные элементы верстки продвигались гораздо медленнее. Является ли это своего рода случаем того, чтобы погрузить свои пальцы в воду и посмотреть, будут ли играть браузеры, а затем мы перейдем к другому, или посмотрим, заинтересованы ли дизайнеры, или это просто более сложная проблема, которую нужно решить?

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

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

Крис: Да, так, но именно поэтому они сначала работали над другими вещами, я не знаю.

Луи: Хорошо, в любом случае, мы надеемся, что мы доберемся до места, где нам не нужно так сильно полагаться на плавание каждого элемента на странице, чтобы получить материал для выравнивания.

Крис: Верно. Есть еще один классный регион под названием «Регионы», который Adobe выложил там, где он определен, это «Регион А», «Регион Б», «С», и когда текст слишком длинный для «Района А», вы можете сказать, что я хочу, чтобы переполнение от «А» перешло в Регион B, и это действительно здорово, когда дело доходит до объединения с медиа-запросами, опять же, вы можете сказать в медиа-запросе вместо текста, перетекающего из A в B, я хочу, чтобы он теперь перешел из A в C, что дает нам более совершенные инструменты для работы с адаптивным дизайном. Потому что я не знаю, много ли вы работали над адаптивным дизайном или узнали о нем много раз, как в разметке с плавающей точкой, ну, у нас сейчас мало места для боковой панели, так что давайте просто пнуть его внизу, адаптивный дизайн — это просто пнуть его (смех).

Луи: Абсолютно.

Крис: В то время как у Трента Уолтона был действительно хороший пост, в котором говорилось, что «отбрось это» не будет длиться вечно. Вы знаете, у меня есть реклама на боковой панели CSS-хитрости, скажем, когда я полностью опускаю свой дизайн, я не хочу просто пнуть всю свою рекламу до дна, я хочу поместить две рекламы между первой и Второй пост и две рекламы между вторым и третьим постом, или что-то в этом роде, немного больше сшивают о том, как я хочу, чтобы этот материал шел вместе, и Регионы плюс медиазапросы теоретически, возможно, теоретически, возможно, могут сделать кое-что для нас.

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

Крис: Да, верно, верно, верно, да. И медиа-запросы не являются JavaScript, поэтому, если вы используете инструмент JavaScript для измерения ширины экрана и когда он достигает 600 пикселей, скажем, вам придется перемещать разметку сейчас, но вам это не понравится, В любом случае, вам придется запускать — вам придется писать и запускать свои собственные события JavaScript, чтобы иметь дело с такими вещами сейчас, медиа-запросы, как они существуют, не помогают с этим.

Луи: Да, надеюсь, как вы говорите, это лучшее решение, и мы в конечном итоге добьемся этого. Я должен спросить об этом, потому что, очевидно, вы говорите, что вы перепроектируете свой сайт два раза в год, и вы также пишете все эти вещи о CSS, которые включают в себя игру во многих браузерах и много исследований о том, как все работает, и я думаю, что вопрос, который моя аудитория заставила бы меня задаться тем, что я не спрашиваю, — откуда берется время, есть ли у вас работа, есть ли что-то, чего мы здесь упускаем, есть ли дополнительный день в неделе, когда остальные о нас не знают?

Крис: Нет, честно, я получаю этот вопрос довольно часто (смех), да, у меня есть работа, я работаю полный рабочий день в компании под названием Wufoo, которую мы базируем из Тампа, Флорида, это инструмент для создания онлайн-форм, и это действительно круто, я был очень рад работать там. Мы приобрели пару месяцев назад компанией Survey Monkey в Калифорнии, поэтому сейчас я работаю в Survey Monkey и живу в Пало-Альто, сейчас сижу в Пало-Альто, совершенно новый, я только здесь был около месяца, так что это большая вещь, и да, я имею в виду, я работаю там весь день. Но работая на такой работе и действительно работая на любой работе, я был в дизайнерском агентстве до этого, вы просто получаете идеи в течение дня через то, над чем работаете, и многие из этих вещей в конечном итоге становятся добрыми. перерабатывать в той или иной форме в учебники или редакционные статьи или что-нибудь для CSS-хитрости. И потом, потому что я думаю и работаю над этим, эти вещи тоже возвращаются к работе, они оба очень хорошо кормят друг друга. Но что касается … у меня нет никаких супер секретов о том, как сделать что-то, вы знаете, я просто просыпаюсь утром и делаю вещи и все такое.

Луи: Эй, это классная история, но я думаю, что я собираюсь придерживаться дополнительного дня в неделе —

Крис: (смеется)

Луи: — Гипотеза, я не покупаю это.

Крис: Вот реальная вещь: не женат, детей нет, у меня есть пара хобби, но они легки и просты, и я просто провожу много часов в день перед компьютером, к сожалению, или к счастью, однако Вы хотите посмотреть на это.

Луи: К счастью для всех нас (смех). Я имею в виду, что вы опубликовали так много крутых маленьких советов и уловок в CSS, какие из ваших любимых, что-то, что вы думаете, если кто-то слушает и много играет с CSS, он может не знать об этой крутой вещи вы можете сделать, и это довольно хорошо поддерживается; Какие уловки вы бы дали слушателям?

Крис: Хм, супер крутые трюки, Боже, я бы хотел, чтобы у меня был самый лучший график моих любимых трюков. Как насчет того, чтобы просто сделать тот, над которым я сейчас работаю, и в последнее время, который я считаю действительно опрятным, я постараюсь объяснить это как можно лучше. Все знают, что такое ввод с переключателем, верно, в HTML это ввод типа радио, и вы можете иметь три из них, скажем, если они имеют одинаковый атрибут name, это группа переключателей, и вы можете щелкнуть один из них. и если вы щелкнете по второму, то первый выключится, а второй включится, или как там, верно?

Луи: Да, я думаю, что мы все на одной странице.

Крис: Да, это действительно легко. А затем в CSS есть селектор с именем pseudo class selector, который называется check, так что вы можете перейти к input: selected и применить некоторые стили к входу, который проверяется, а не check, чтобы вы могли сделать так, чтобы у него был цвет фона или что-то подобное; это не будет иметь большого значения для переключателя, но дело в том, что вы можете с помощью CSS выбрать вход, который находится в проверенном состоянии, что в случае переключателя означает, что он заполнен, это переключатель. Итак, мы получили это, и мы также знаем, что вы можете нажать на метку, чтобы активировать переключатель, поэтому, если ваша метка имеет атрибут с четырьмя, который соответствует атрибуту ID переключателя, нажатие на эту метку проверит ввод , Все еще со мной?

Луи: (смеется) Да, я думаю, надеюсь.

Крис: Теперь ты можешь —

Луи: Трудно — как эти вещи по сравнению с тем, что мы могли бы назвать «радио», может быть сложно что-то помнить, но я …

Крис: Вы получили это; это всего лишь несколько кнопок и ярлыков, и это все, что у нас есть сейчас.

Луи: Пока все хорошо.

Крис: Теперь вы не отображаете ни одного на этом входе флажка, так что он просто исчез, все, что у вас есть, это несколько ярлыков, он просто говорит, что ярлык один, ярлык два, ярлык три, но все равно щелчок по ним все еще проверяет и снимает флажки, они все еще функционируют , Что ж, в CSS теперь мы можем сделать ввод: проверил, а затем использовать маленькую волнистую линию, которая является соседним комбинатором, и затем выбрать как div. Итак, суть того, что мы пытаемся найти, заключается в том, что вы можете создать как область с вкладками, вы знаете, как работают вкладки, например, в 90% случаев это JavaScript, вы нажимаете одну вещь, и она показывает область контента, Если вы щелкнете по другой вкладке, на которой будет отображаться область содержимого, вы можете создать ее полностью в CSS с помощью переключателей. Таким образом, вы нажимаете на ярлык, и он активирует один из флажков, а затем вы выбираете скрытый или, возможно, под ним div с индексом z и вид раскрытия различных областей с вкладками в зависимости от того, какая кнопка-переключатель включена, поэтому Нужен какой-либо JavaScript, чтобы получить готовые области с вкладками. И я просто думаю, что это умная идея использования проверенного псевдоселектора в CSS может сделать кучу интересных вещей, и я думаю, вы знаете.

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

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

Луи: Да, говоря о доступности, вы тратите немало времени на тестирование с программами чтения с экрана, каков ваш рабочий процесс вокруг этого?

Крис: нет, к сожалению, нет. Мы как бы вынуждены думать об этом как о дизайнерах, особенно как о парне, который пишет учебные пособия, подобные мне, потому что, если я выпущу учебник, который полностью игнорирует доступность, то выйдет бригада, и правильно, что люди должны, мы должны кричать друг на друга за создание недоступных вещей. К сожалению, у меня нет трех экранных ридеров, в которых я всегда тестирую, или что-то в этом роде, и, если честно, обычно я тестирую в ридерах с нулевым экраном, но я чувствую, что я так много об этом читал и знаю, какие подводные камни плохая доступность заключается в том, что, как правило, я чувствую, что могу выполнять довольно хорошую работу без чрезмерного тестирования, хотя это немного смущает, но мне, вероятно, следует приобрести некоторые программы для чтения с экрана.

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

Крис: Это, вероятно, не очень глубоко, я пытаюсь думать не так, вы могли бы сослаться на CSS SitePoint, где он перечисляет все селекторы и имеет мелочи, я думаю, что это, вероятно, как IE 8 вверх.

Луи: Да, да.

Крис: Это, вероятно, не так глубоко, как хотелось бы большинству людей, и когда я говорю о IE 8, это также означает почти все остальное.

Луи: Все остальное, да (смеется).

Крис: Когда люди спрашивают о поддержке браузера, они имеют в виду, какая это самая старая версия IE, в которой он работает.

Луи: Это довольно обычный случай. Я имею в виду, кроме действительно передовых вещей.

Крис: Да, верно. Это достаточно глубоко. Вы, наверное, знаете, делаете ли вы что-то прогрессивное, например, статистику вашего браузера и среду, в которую вы стреляете, и тому подобное, как если бы я делал это на CSS-Tricks, и я бы не подумал об этом дважды, вкладка область, как я только что говорил.

Луи: Да.

Крис: Но если бы я создавал клиентский сайт или что-то подобное, и я предвидел, что, возможно, я столкнулся бы с проблемой, я бы просто использовал JavaScript, в этом нет ничего плохого, вы знаете, я не люблю выступать за то, чтобы техника CSS была лучше.

Луи: Да, абсолютно. Итак, возвращаясь к использованию этих техник на CSS-трюках, как CSS-трюки выглядят в IE 6?

Крис: Я даже отключил IE 7 сейчас. И как я это сделал, просто Google это, у меня нет ссылки для вас или что-то еще, есть вещь, называемая универсальной таблицей стилей IE 6.

Луи: Да, я знаком с этим.

Крис: Я думаю, что изначально это был Энди Кларк или что-то в этом роде, и это похоже на набор разумных стилей, похоже на то, как должна выглядеть таблица стилей печати.

Луи: Да, только одна длинная колонна.

Крис: Да, и вы просто используете комбинированный набор условных комментариев в вашем — когда вы загружаете свои CSS-файлы в заголовке документа, который первоначально обслуживает эту конкретную таблицу стилей только в IE 6, но я сделал так, чтобы она служила IE 7 также, и это не потому, что я пытаюсь быть придурком, моя статистика по CSS-хитростям для IE 7 настолько низка, что это просто — зачем беспокоиться, это просто пустая трата времени.

Луи: Да.

Крис: Я не хочу вступать во все эти дебаты, это как мои наименее любимые дебаты в веб-дизайне (смех), потому что я как бы не знаю, просто посмотрите на вашу статистику, примите решение и заткнитесь Знаете (смех).

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

Крис: полностью, полностью. И вы знаете, что, если вам нужно поддерживать старое, а затем поддерживать старое, я не пытаюсь никого обидеть за то, что он это сделал; Survey Monkey поддерживает IE 6, вы знаете, наши живые формы в Wufoo, форму Wufoo, которую вы создаете и которую могут увидеть ваши пользователи, которая поддерживает IE 6, вы знаете, как будто я знаком с необходимостью поддержки этих старых вещей, это совершенно нормально.

Луи: Да, абсолютно. Итак, в работе, которую вы выполняете в Wufoo, а теперь и в Survey Monkey, вы стремитесь к совершенно идентичному опыту в этих старых браузерах, или это больше похоже на работу, и мы сделаем то, что можем?

Крис: Да, это то, что это то же самое, это то, что вы ожидаете, это углы квадратного типа опыта, вы знаете, как бы то ни было, мы не делаем ничего сверхъестественного, например, В HTML5 теперь есть несколько интересных функций, связанных с формой, таких как валидация и подобные средства выбора даты и тому подобные вещи, но мы этого не делаем — мы используем некоторые из этих вещей, но очень ограниченное их количество, например, это то, что не будет работать в IE 6 или 7 или 8 или 9 в большинстве случаев.

Луи: Да.

Крис: Но мы не должны, вы знаете, это не так, как будто мы просто позволяем этому вернуться к дурацкому опыту, нет, если вы поместите поле выбора даты в форму Wufoo, оно будет работать в IE 6, вы знаете, ,

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

Крис: Это хороший вопрос. Я не очень. Я чувствую, что, возможно, мне следовало бы, но, я не знаю, я также хотел бы знать наверняка, что у меня есть последняя стабильная сборка, которая есть в 99% мира, поэтому мне обычно веселее пытаться создавать вещи для стабильных браузеров. ,

Луи: Да.

Крис: И тогда это не то, что, черт возьми, мне нужно провести вечер, потому что тогда мне нужно узнать все об этом материале, поэтому, когда он действительно выходит, я впереди кривой, я, как, хм, я знаю, что по большей части, спускаясь по трубе, понимаете, как только этот материал станет стабильным, я могу записать это или что-то еще, вы знаете, я не делаю супер ночные вещи.

Луи: Да. Я вспомнил, что когда я работал над книгой SitePoint HTML5 и CSS3, одной из вещей, которая возникла, была краткая версия Chrome, и это была релизная версия, которая, как вы знаете, у них такая. встроенные сообщения проверки для элементов формы HTML5?

Крис: Хм-мм.

Луи: Итак, если вы укажете, что требуется, например, это атрибут в поле формы, который будет просто всплывать в браузере, сообщая, что вы должны заполнить это поле.

Крис: Да, да.

Луи: И была эта версия Chrome, я думаю, она была примерно в версии 9 или 10, когда, если вы поместите один из этих атрибутов в поле пароля, появившееся сообщение было запутано (смеется).

Крис: Я помню это.

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

Крис: Да, чувак, это отличный пример, и если есть кто-то, кто любит гиков, чтобы найти что-то неправильное в реализациях в браузерах, поиграйте с формами HTML5, потому что это то же самое, что все они, святой, (смех) HTML5 формы — это просто крушение; Ненавижу это говорить, потому что я большой поклонник всего этого, и мы движемся в правильном направлении и тому подобное, но человек. На Wufoo, если вы идете на Wufoo.com/html5Я лично поддерживаю эту страницу совместимости текущего ландшафта браузера и всех функций форм HTML5, и это … это просто дурацкий взлет, когда выходит новый браузер, я как бы иногда добавляю вещи, иногда они удаляют вещи, что является сумасшедшим, обычно вы думаете, что это движущийся вперед поезд, браузеры, если у него есть функция, она всегда есть, а затем, возможно, появятся новые вещи, но в случае форм HTML5 есть куча примеров, как, ну, которые раньше работали, не надо больше, странные вещи, как это.

Луи: Да, это конечно интересно. Но это так, я имею в виду, что прогресс определенно достигнут, я помню, что было время, и это было не так давно, когда было трудно использовать какую-либо действительно большую размытую тень от окна в браузере WebKit, потому что это просто размолотило бы все это остановилось.

Крис: полностью.

Луи: И ты не мог прокрутить.

Крис: Хм-м-м, я отслеживал продвижение того, что сейчас исправлено, слава Богу.

Луи: (смеется) Да.Я помню, когда, наконец, вышел релиз, который работал, я был таким, хорошо, вот так; Теперь мы все на борту.

Крис: Да, и, к счастью, Chrome нам не нужен, например, как часто вы будете походить, да, но как насчет Chrome 10, вы знаете, что никто не в Chrome 10.

Луи: (смеется) Да.И я думаю, что это действительно хороший признак движения вперед, что, по крайней мере, я имею в виду, что два больших альтернативных браузера в Chrome и Firefox сейчас находятся в быстром графике выпуска, поэтому исправление ошибок происходит быстро. Что вы думаете об IE, знаете ли вы, ожидаете ли они, что они перейдут к такому графику релизов, как вы думаете, они могли бы осуществить его?

Крис: я не знаю. Ну, наверное, нет.

Луи: Как вы думаете, у них есть корпоративная культура, чтобы осуществить это?

Крис:Они все в порядке, хотя. Например, IE 10 приятен, как и предварительные просмотры платформы. В нем даже есть элементы HTML5-форм, чего не было в предварительном просмотре платформы один, а теперь в предварительном просмотре платформы — два, и я, наконец, согласен, потому что получить эту огромную форму на HTML5-формах — это здорово. Я не знаю об их графике выпуска, вы знаете, в мире веб-дизайна в Твиттере это действительно забавная новость — слушать людей, каждый раз, когда обновления Firefox напоминают: «помедленнее, чёрт, ребята» ( смех), и они вроде как хорошо, они публично заявили, что сейчас переходят на график выпуска, основанный на времени, это все, что это значит, значит, теперь у них есть дата для их функций, и что бы они ни делали к тому времени нажмите новую версию. Я имею в виду, что это произвольно, и я знаю этоЭто немного отталкивает, или что-то в этом роде, например, номера версий раньше что-то значат или что-то в этом роде, но на самом деле это хорошо, это означает, что появляются новые функции, и мы не просто ждем новых вещей, какого-то произвольного набора функций что они просто решили показать новую версию, вы знаете, мы все больше и больше получаем новые вещи, поэтому я приветствую это.

Луи: Да, абсолютно. И другие типы — я имею в виду, если вы посмотрите на дистрибутивы Linux, Ubuntu с самого начала работала над этим выпуском, и он работал нормально для всех наших серверов, так что, знаете, если сервер может это сделать, то браузер должен быть в состоянии сделать это, и оба конца находятся на этом быстром графике выпуска.

Крис: Моя единственная критика была бы, может быть, они должны были быть немного более публичными об их переходе на эту новую систему, как я не знаю, может быть, они были лучше, но я чувствую, что они были немного спокойны об этом, они сказал это, но не было всплывающего окна или чего-то подобного, например, добро пожаловать в новый Firefox, эй, слушай, это случится чаще, ты знаешь, или какая-то заставка, объясняющая новую вещь; возможно, они должны были сделать немного лучший пиар другими словами.

Луи: Да, но я думаю, что в то же время вы смотрите на то, что Chrome делал это какое-то время, и все это не говорило никому, верно, оно просто тихо обновляется в фоновом режиме, и вы даже не знаете, что вы делаете ». работает новая версия Chrome.

Крис: Да, они должны сделать это, все должны делать это, я думаю, я думаю, это круто. И люди из службы безопасности могут быть немного обеспокоены, типа, оу, теперь мое… я должен одобрить любое новое программное обеспечение, но я имею в виду, что это здорово.

Луи: И Firefox на самом деле не заставляет вас соглашаться, он говорит, что мы установили новую версию Firefox, просто перезапустите, и это будет, вы знаете.

Крис: они делают это сейчас?

Луи: Вот что произошло, когда пришла 6, что было пару дней назад, я думаю, это просто как бы сказал —

Крис: Итак, когда вы открыли, это просто «сейчас у вас работает 6»?

Луи: Теперь мы обновились до 6, перезапустим и теперь будем работать с 6.

Крис: Ладно, у вас не было выбора, но вы все равно должны были нажать кнопку!

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

Крис: Верно.

Луи: Другое дело, я думаю, что экосистема расширений Firefox еще не дошла до этого, потому что вы должны указать, с какой версией и расширением он совместим, как это займет несколько дней, чтобы его расширения догнали при выходе новой версии. выходит, и это означает, что с тех пор, как они выпустили релиз, вы получили пару дней «мой браузер не работает».

Крис: пару дней, если вам повезет, вы знаете.

Луи: Да, если вы разработчики расширений, то вы на вершине.

Крис: Верно. Например, если вы сегодня являетесь веб-дизайнером, так как наверняка используете Firebug, я имею в виду, что он как абсолютный, он как самый важный инструмент в нашей карьере за последние десять лет (смех), Firebug и Web Inspector в любом случае, вы просто живете весь день в этой штуке, если вы — человек с интерфейсом JavaScript или CSS или HTML, что угодно, вы пользуетесь ерундой, я гарантирую это, а если нет, то я даже не знаю, что ты делаешь (смех). Так что это неприятно, потому что Firebug должен обновляться каждые пару дней или что-то еще.

Луи: Да. Что вы думаете об этом, я имею в виду, если вы посмотрите на Chrome и Safari, а также на Web Inspector и даже Opera, Web Inspector представляет собой встроенную функцию браузера, и это не отдельное расширение, которое разрабатывается отдельно, это часть основного набора функций. ,

Крис: Ну, потому что сотрудники этих компаний создают эти инструменты, а в Mozilla это не так, это самостоятельный проект. Я думаю, что они должны купить или они должны нанять всю команду Firebug в Mozilla и сделать это? да.

Луи: Да, верно.

Крис: И потому что они не потеряли своего ведущего разработчика для Web Inspector и команды Chrome, так что это отстой для Firebug и потрясающе для Web Inspector, который я сейчас так или иначе использую, так что я все как ууу.

Луи: (смеется)

Крис: Но, да, я думаю, что было бы облом, если Firebug был прекращен или был просто в нисходящей тенденции. Какой вы используете?

Луи: Вы знаете, я действительно предпочитаю Firebug с точки зрения пользовательского интерфейса, так как все в Firefox просто имеет смысл для меня, и, может быть, это просто тот случай, когда я использовал его вечно, так что все кажется действительно интуитивно понятным, но всякий раз, когда у меня есть использовать Web Inspector и пытаться отключить свойство или отредактировать свойство на лету, я всегда как двойной щелчок по нему, и он ничего не делает, и в любом случае, это, вероятно, только я. Но потом я недавно переключился на Chrome, потому что у меня недостаточно оперативной памяти для запуска Firefox (смех).

Крис: Вау, это смешно.

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

Крис: Да, я слышал, что 6 лучше, а не так сложно.

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

Крис: я могу полностью рассказать, я нахожусь в обоих этих лагерях; Я долгое время оставался приверженцем Firefox и бездельничал Chrome, а потом он, наконец, засосал меня.

Луи: Да.

Крис: И теперь я снова ищу альтернативы, потому что для меня Chrome, и это совершенно случайная вещь, редакторы, вы можете отредактировать это (смеется), моя конкретная версия Chrome — я ненавижу подкасты, где парень говорит о чем-то настолько специфичен для него, что это похоже на то, почему кого-то это волнует, но Chrome для меня постоянно делает «ах-хин» страницу.

Луи: О да, да. Что меня беспокоило, так это то, что в Firefox было что-то вроде «упс, это неловко», что бы это ни было, эта страница с ошибкой.

Крис: Да, да.
Луи: Как мило, когда ты видишь это время от времени.

Крис: Верно.

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

Крис: Хорошо, да, об этом стоит подумать для вас, UX-людей (смеется), будьте милыми, но только если это предписанное очень небольшое количество времени, вы знаете.

Луи: Да, ну, для UX-людей это то, насколько вы доверяете своим инженерам в создании программного обеспечения, которое никогда не выходит из строя; если вы это сделаете, то вы можете быть осторожны, если нет, я думаю, вы должны пойти с более простым сообщением об ошибке.

Крис: Итак, я вернулся к Safari, это конец этой истории, что странно.

Луи: Действительно?

Крис: Да. Как бы то ни было, у него есть хороший — мне сейчас нравится Web Inspector, потому что я привык к Web Inspector, так что.

Луи: Мне нравится, что в нем есть кое-что, чего не было у Firebug в прошлый раз, когда его не было, вещи для манифеста кеша, и что еще, локальное хранилище было сложнее проверить, если я не ошибаюсь.

Крис: Да, но я имею в виду, что вы можете просто использовать консоль для локального хранения, но все же я знаю, что вы имеете в виду. Да, я не знаю, мне нравится — мне нравится, когда мне нравятся милые пурпурки (смех). Хорошо, вот моя вещь, в Firebug материал справа имел — он был во вкладках, поэтому, если вы хотите посмотреть на метрики или свойства DOM, или CSS, примененный к элементу, или что-то еще, это были вкладки справа, а в Web Inspector они похожи на аккордеон, они друг на друга, так что прокрутки намного больше, и я действительно ненавижу это, но мне действительно нравится все остальное в Web Inspector. И, например, тот факт, что вы можете проверять псевдоэлементы, уникален для Web Inspector, и это в последнее время очень важно для меня.

Луи: О да, да, потому что вы используете много таких в дизайне. Я видел кое-что, о чем вы говорили, что это, псевдоэлементы и переходы или анимации, это было правильно?

Крис: Да, да, потому что в последнее время я говорил о псевдоэлементах и ​​о том, насколько они крутые, какие они есть на самом деле, и одним из текущих ограничений для них является то, что вы не можете использовать, как мы говорили о более ранних анимациях или переходах на них, кроме как в Firefox. Так что я просто позаботился о том, чтобы все браузерные рендеры имели активную квитанцию ​​об этой ошибке, и я просто сделал диаграмму, и я был похож, слушай, на этой странице я собираюсь отслеживать прогресс в этом, потому что я думаю, что это Вы знаете, все ошибки важны, но этот — тот, который важен для меня сейчас (смех), я просто хочу отследить это, и я хочу вести блог так, чтобы другие люди следили за этой ошибкой и просто Например, пусть производители браузеров знают, что это глупо, и вы должны это исправить.

Луи: Похоже, это один из тех, которые вы ожидаете работать без необходимости что-либо делать, верно, как если бы я только установил его так, чтобы анимация применялась к элементам в коде моего браузера; Похоже, одна из тех вещей, которые вы должны сделать из своего пути, чтобы это не сработало.

Крис:(Смеется.) Я не думаю, что это правда в этом случае, но я знаю это чувство, и я не хотел говорить «исправить», потому что я рад, что кое-что из этого работает и никогда не нравится работал, а потом сломался или что-то еще, и я бы ненавидел еще больше, если бы это была наполовину сломанная реализация, так что что бы там ни было, они просто еще там, они не сломаны, просто их еще нет. Как будто псевдоэлементов нет в DOM, знаете ли, для кретинов JavaScript, так что я думаю, что это часть этого, я не совсем уверен. Я чувствую, что есть какая-то причина, почему это сложнее, и я думаю, что отчасти это связано с тем, что производители браузеров не решаются реализовывать вещи, которые не очень хорошо выделяются; Я имею в виду, что я разговариваю с некоторыми из этих ребят, которым нравится создавать функцию для браузера, и когда спецификациятам им нравится останавливаться и ждать, и иногда они сами работают над спецификацией, вы знаете, или они просто делают заметку в спецификации, которая говорит: «Послушайте, мы не собираемся это вставлять, пока вы не исправите эти три эзотерические проблемы, Вы знаете, если это правильное слово.

Луи: Да, да, абсолютно. Ну, это имеет смысл. Хорошо, хорошо, смотри, было здорово, что ты был на шоу, я не хочу, чтобы это продолжалось вечно, потому что никто не дойдет до конца, так что да, это было здорово, что ты на шоу и говоришь о все эти вещи. Если кто-то, опять же, слушает, незнаком с CSS-хитростями, вы должны обязательно это проверить, есть масса действительно полезных вещей, независимо от того, как вы сказали, является ли CSS частью вашей повседневной работы или это то, что вы делаете только один раз в в то время как когда вы редактируете шаблон и, как вы сказали, там есть не только CSS, но и множество других аспектов веб-разработки, это отличный сайт. Так это CSS-Tricks.com ? Да.

Крис: Да.

Луи: По какой-то причине я подумал, что на секунду там нет.

Крис: Нет, это было бы как двойной удар.

Луи: То есть без дефиса, когда вы искали это, или это было просто …?

Крис: Я даже не помню (смеется).

Луи: Хорошо.

Крис: Я думаю, что это, вероятно, было взято, и, вероятно, все еще занято, мне просто все равно, вы знаете, как будто большая часть трафика — это рефералы и Google в любом случае.

Луи: Абсолютно. Хорошо, если люди хотят найти вас в Твиттере или где-то еще в Интернете, куда они идут?

Крис: Меня всегда зовут, поэтому меня зовут Крис, а потом моя фамилия — COYIER, как и все, Flickr, Twitter ( @chriscoyier ), Google Plus, что угодно.

Луи: Хорошо, это легко.

Крис: Спасибо за то, что приняли меня, было действительно здорово поговорить с вами и быть здесь.

Луи: Хорошо, спасибо!

Спасибо за прослушивание подкаста. Мне бы очень хотелось услышать, что вы думаете о сегодняшнем шоу, поэтому, если у вас есть какие-либо мысли или предложения, просто зайдите на Sitepoint.com/podcast и вы можете оставить комментарий к сегодняшнему эпизоду, вы также можете загрузить любой из наших предыдущих эпизодов для загрузки. или подписаться, чтобы получить шоу автоматически. Вы можете подписаться на SitePoint в Twitter @sitepointdotcom , это SitePoint dotcom, и вы можете подписаться на меня в Twitter @rssaddict . Шоу на этой неделе было спродюсировано Карном Броудом, а я — Луи Симоне, спасибо, что выслушали и пока.

Тема музыки Майка Меллы .

Спасибо за прослушивание! Не стесняйтесь сообщить нам, как у нас дела, или продолжить обсуждение, используя поле комментариев ниже.