Кодирование вопросов и ответов с Крисом Койером: Запах и тип кода на сетке

  1. Дальнейшее чтение на SmashingMag:
  2. Тип на сетке
  3. Центрирование и сброс
  4. Непрозрачность Блюз
  5. Граница-Радиус на изображениях
  6. Обнаружение плохого кода
  7. Отправить свой вопрос!

Ну вот опять! Q & A журнала Smashing. Ваш вопрос может быть об очень конкретной проблеме, с которой вы столкнулись, или это может быть вопрос о философском подходе. Сойти с ума и бросить вызов нам!

Привет, ребята! Добро пожаловать в новую версию журнала Smashing Magazine. Это будет работать так: вы отправляете свои вопросы о CSS, и, по крайней мере, раз в месяц мы выбираем лучшие вопросы и отвечаем на них, чтобы каждый мог получить пользу от обмена. Ваш вопрос может быть об очень специфической проблеме, с которой вы столкнулись, или это может быть вопрос о философском подходе. Мы возьмем все виды.

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

Дальнейшее чтение на SmashingMag:

Андрейс Абрикис спрашивает:

«Иногда я сталкиваюсь с проблемами с дизайном электронной почты HTML и правильным кодом CSS. Требуется довольно много времени, чтобы сделать его совместимым между клиентами. Мне бы хотелось узнать ваше мнение о лучшем сбросе CSS, который может помочь ускорить разработку рассылки по электронной почте. Есть ли хороший инструмент для тестирования электронных писем в формате HTML? »

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

Если вы уверены, что вам нужно отправить электронное письмо в формате HTML, я бы опять допустил ошибку на стороне простоты. Идея, с которой я играю, - сделать дизайн электронной почты размером с макет портретного смартфона. Это ограничение заставляет вас снова подумать о сообщении, обеспечивает простоту (и, как побочный бонус, будет хорошо смотреться как для мобильных, так и для настольных клиентов). Когда вы в последний раз получали электронное письмо и думали: «Чувак, я бы хотел, чтобы это письмо было более сложным!»

HTML Email Boilerplate   предоставляет своего рода шаблон, отсутствующий в дизайне или макете, который поможет вам избежать некоторых основных проблем рендеринга с наиболее распространенными почтовыми клиентами - Gmail, Outlook, Yahoo Mail и т
HTML Email Boilerplate предоставляет своего рода шаблон, отсутствующий в дизайне или макете, который поможет вам избежать некоторых основных проблем рендеринга с наиболее распространенными почтовыми клиентами - Gmail, Outlook, Yahoo Mail и т. д.

Но вы хотели знать о кросс-клиентской совместимости и тестировании. Проверьте HTML Email Boilerplate , Он был создан в том же духе, что и HTML5 Boilerplate, в нем рассматриваются все различные особенности почтовых клиентов и приводится пример очень минимальной структуры, с которой можно начинать. Я пытался использовать его как есть, но я должен признать, что нашел это слишком много для простой работы с электронной почтой, которую я делал. Более сложные и разнообразные электронные письма, безусловно, выиграют от этого, и это также, безусловно, отличный справочник для быстрого решения проблем.

Для разработки электронной почты в формате HTML есть два простых правила:

  1. Используйте таблицы для разметки. Это по-прежнему самый надежный метод компоновки для кросс-клиента.
  2. Инлайн стиль все. Любая другая поддержка CSS является пятнистой.

Проектирование с использованием встроенных стилей - большая проблема, поэтому я рекомендую разработать блок <style> в <head> для вашего CSS. Сохраните его как свою копию для разработки, а затем непосредственно перед развертыванием запустите его через MailChimp's Автоматический инструмент CSS Inliner которая сделает всю грязную работу по встроенному стайлингу за вас.

Говоря о MailChimp, вы можете рассмотреть возможность использования их службы для создания и развертывания электронной почты. Их шаблоны уже совместимы между клиентами (плюс у них есть служба тестирования ). Их дизайнерский инструмент прост в использовании и поможет вам в этом процессе. Не говоря уже о том, что вы получаете все эти огромные преимущества, такие как лучшая доставляемость, которую вы не можете получить самостоятельно, статистика, поддержка и многие другие функции. Извините, если это звучит как реклама, но я всецело использую сервисы, которые делают нашу жизнь проще и лучше как разработчики.

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

Поддержка CSS на   Монитор кампании   ,
Поддержка CSS на Монитор кампании ,

Тип на сетке

Максим Парментье спрашивает:

«Мне было интересно, как вы поддерживаете постоянную высоту строки в каждом элементе вашей страницы? Это гораздо сложнее, чем кажется на практике. Какие инструменты или методы вы можете порекомендовать?

Часто эта практика называется поддержанием «базовой сетки». Вот демо из Статья Ричарда Раттера , А также еще одна демка из Статья Уилсона Майнера , Я сам играл с этим немного.

Дэйв Руперт предлагает разговор об адаптивном дизайне , где он обсуждает, как ems полезны для базовых сеток, потому что они основаны на соотношениях. Он также рассказывает о том, как они особенно хороши в математическом мире адаптивного дизайна. Вот пример того, как Дейв типа хорошо выстраивается в сетку, что также учитывает некоторые странности заголовков разных размеров.

Посмотрите этот пример
Посмотрите этот пример.

Существует книга Хоя Виня о сетках (в том числе типовых), которая называется Нарушение порядка: принципы сетки для веб-дизайна , Хой учит всему о сетках, но ясно, что вы не должны быть догматичными по отношению к ним. Разрушение сетки иногда нормально, если вы вернетесь к ней. Я думаю, что хорошей метафорой является синкопация в музыке - ритм специально прерывается во время песни, так что, когда он начинает звучать, он замечается и чувствует себя хорошо.

Центрирование и сброс

Смараджит Дасгупта спрашивает:

« 1. Что представляет собой достойный совместимый с браузером способ центрирования плавающих (или встроенных) элементов, таких как кнопки и ссылки, в гибких (или неизвестных) сценариях ширины?

2. Какой ваш предпочтительный сброс CSS в эпоху HTML5? Вы все еще советуете использовать великий сброс Эрика Мейера, который в значительной степени удаляет все стили браузера для элементов? Или вы используете что-то вроде normalize.css или пишете свое на индивидуальной основе? »

1. Встроенные элементы легко центрировать, поскольку они учитывают значение выравнивания текста родительского элемента, которое можно установить по центру. Допустим, у вас есть несколько якорных ссылок в строке, вы просто оберните их в элемент nav и примените к нему выравнивание текста по центру ( как это ). Если вам нужно, чтобы они немного больше походили на элементы уровня блока (например, имели заданную ширину или высоту), вы можете заставить их отображать: inline-block; и они все равно будут оставаться в центре ( как это ).

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

Плавающая кошечка   демонстрация   ,
Плавающая кошечка демонстрация ,

Затем вы поместите элемент в пространство, которое имеет смысл (возможно, с абсолютным позиционированием). Подробнее об этой идее здесь.

2. мне нравится normalize.css , Мне не нравится идея убирать вещи, чтобы просто вернуть их обратно. Поэтому мой процесс - взять копию файла normalize.css, ничего не удалять, а изменить некоторые объявления по своему вкусу (что по-прежнему обеспечивает согласованность, потому что вы явно). Затем включите это в мою глобальную таблицу стилей, как если бы я включил сброс, и перейдите оттуда.

Непрозрачность Блюз

Крис Кляйн спрашивает:

«Как мне остановить наследование непрозрачности? Я не могу использовать другой png с непрозрачностью 50% и более высоким z-индексом выше, так как макет должен оставаться на 100% жидким. Кроме того, я попытался вставить интервалы между блоком с непрозрачностью и следующими блоками, но непрозрачность все еще наследуется всем остальным блокам, которым он следует. Даже если в следующих полях указана непрозрачность: 1; не имеет значения, наследование продолжается ”.

Там есть много маленьких кусочков, которые заставляют меня задуматься о том, какой именно макет вы работаете. Если фоны, о которых идет речь, плоские, просто используйте Rgba или же HSLA , Это оба типа значений цвета, которые вы можете использовать для объявления альфа-значения, что по сути означает «какой процент прозрачности у этого цвета?». Например, rgba (255, 0, 0, 0.5) означает «50% красного». Это имеет гораздо больше смысла, чем использование фактической непрозрачности для элемента, которая, как вы знаете, влияет на все внутри (не только на фон).

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

Если фон в вашем дизайне не является плоским цветом, вы можете вступить в клуб, чтобы узнать, есть ли свойство background-opacity. Одна вещь, которую вы можете попробовать - это псевдоэлементы. Оставьте основной элемент с полной непрозрачностью, но примените селекторы :: before и :: after, которые вы располагаете по мере необходимости, и примените к ним прозрачность. Николас Галлахер демонстрация этого ,

Юпитер   демонстрация   ,
Юпитер демонстрация ,

Граница-Радиус на изображениях

Донован Хатчинсон спрашивает:

«Почему нельзя напрямую применить радиус границы к изображению? И лучший ли способ использовать упаковочный div? »

Это возможно! Вы применяете это так, как вы думаете:

img {border-radius: 10px; }

Граница Радиус демо
Граница Радиус демо.

Я думаю, что некоторое время это путало, потому что в недалеком прошлом Firefox 3.6 требовал использования -moz-border-radius для закругленных углов, и эта реализация не работала с изображениями. IE9 был первой версией, поддерживающей радиус границы, и он делает это без префикса и прекрасно подходит для изображений, поэтому даже IE здесь не проблема.

Если вам абсолютно необходима поддержка Firefox 3.6 (и ниже) ( 1,55% по всему миру и быстро падает ), да, как вы упомянули, вы можете получить его, используя вместо этого div и установив background-image of div для src изображения. Вы можете сделать это в своем шаблоне, где бы он ни выводил этот URL (или, если это невозможно, с небольшим количеством jQuery):

$ ("div.avatar"). each (function () {var el = $ (this); var url = el.find ("img"). hide (). attr ("src"); el.css ( "background-image", "url (" + url + ")");});

Обнаружение плохого кода

Майкл Занзини спрашивает:

«Как вы можете определить, пахнет ли ваш код CSS? Каковы признаки того, что код является необязательным, или что разработчик не сделал хорошую работу? Что вы ищете в коде, чтобы определить, насколько он хорош или плох? »

Самый очевидный способ сказать: сайт выглядит испорченным? Тогда это плохой CSS. Если сайт выглядит отлично, то он проходит первый тест.

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

После этих довольно очевидных вещей, вам придется больше мысленно углубиться в код. Прочитайте это. Селекторы выглядят красиво и рационально (например, ничего особенного, как .article #comments ul> li> a.button)? Похоже, есть много повторяющегося кода (например, одна и та же сложная box-shadow, объявленная 15 раз)? Является ли он абсолютно огромным (например, 100 000 будет абсолютно огромным, как чек)?

Последнее, что я могу сделать, это попытаться проверить понятность, выполнив личный тест. Предполагая, что вы на полпути приличны в CSS, подумайте о небольшой задаче, которую вам, возможно, придется выполнить на веб-сайте. Отрегулируйте цвета и интервал конкретного заголовка. Попробуй и сделай это. Было ли это легко? Хорошо. Было ли это трудно понять? Нехорошо.

Отправить свой вопрос!

Продолжайте в том же духе, ребята! Есть хороший? Отправьте свой вопрос CSS через нашу форму, и мы выберем лучшее для следующего издания. Пока!

Есть ли хороший инструмент для тестирования электронных писем в формате HTML?
Может ли это быть просто текст?
Какие инструменты или методы вы можете порекомендовать?
Вы все еще советуете использовать великий сброс Эрика Мейера, который в значительной степени удаляет все стили браузера для элементов?
Css или пишете свое на индивидуальной основе?
И лучший ли способ использовать упаковочный div?
Каковы признаки того, что код является необязательным, или что разработчик не сделал хорошую работу?
Что вы ищете в коде, чтобы определить, насколько он хорош или плох?
Селекторы выглядят красиво и рационально (например, ничего особенного, как .article #comments ul> li> a.button)?
Похоже, есть много повторяющегося кода (например, одна и та же сложная box-shadow, объявленная 15 раз)?

Комментарии запрещены.