Как я могу отключить цвет, определенный в ранее определенном классе CSS - PullRequest
Новая
       9

Как я могу отключить цвет, определенный в ранее определенном классе CSS

3 голосов
/ 15 июля 2010

Недавно при кодировании и HTML-почте я заметил, что Yahoo!начал захват некоторых ссылок и ключевых слов, добавив <span class='yshortcuts'>, который изменяет цвета текста и ссылок, что может вызвать довольно серьезные проблемы с отображением.

Исправление, которое Yahoo!Это довольно уродливо (добавление диапазона во все затронутые ссылки и ключевые слова) - далеко не простое универсальное решение, особенно когда они применяют стиль к, казалось бы, произвольному тексту.

Мне интересно,можно просто перевесить их класс, а некоторые, как с помощью css, удалить атрибут color.(Хотя блоки <style> не поддерживаются на всех основных платформах электронной почты, Yahoo! поддерживает ... и те, которые не поддерживают его, изящно игнорируют его.)*

Я знаю, что color:none; недействителен и не работает универсально.

Есть идеи?

Ответы [ 5 ]

0 голосов
/ 20 июля 2010

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

  1. В верхней части письма добавьте этот блок стилей.Это решит большинство проблем в большинстве браузеров. 

    <style>
.yshortcuts{color:inherit;}
</style>

  2. Поскольку мы хотим, чтобы люди из IE тоже были счастливы, вставьте в каждый <a> интервал с цветным стилем.это вызывает проблемы.Например: 

    <a href="http://google.com" style="#c912dc"><span style="#c912dc">Google</span></a>

Это должно исправить это почти во всех ситуациях.

Поскольку это может быть затруднительно, если вы уже закодировали файл вручнуюВы можете выполнить поиск / замену регулярных выражений, и это должно помочь ускорить процесс (но ваш пробег может варьироваться ... работает в Textmate):

Найти: 

(<a[^>]*style=".*color:#(\w{6}).*".*>)(.+)(</a>)

Заменить: 

$1<span style="color:#$2;">$3</span>$4
0 голосов
/ 15 июля 2010

К сожалению, я обнаружил, что для создания надежных стилей для большинства почтовых клиентов встроенные стили - единственный путь. Некоторые удаляют любые стили, объявленные в голове, некоторые добавляют свои собственные классы, некоторые добавляют случайные дополнительные элементы - но, присваивая каждому элементу свой собственный встроенный стиль - вместе с некоторыми просто замечательными таблицами - я получил это рендеринг последовательно в каждом крупном клиенте - Gmail, Outlook, Hotmail, Yahoo и т. д.

Эта статья очень полезна для того, чтобы узнать, кто и что поддерживает: http://www.campaignmonitor.com/css/

0 голосов
/ 15 июля 2010

Вы можете переопределить цвет более конкретным селектором в CSS 

body #content .yshortcuts{color:inherit;}
0 голосов
/ 15 июля 2010

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

p {color: black}
a {color: blue}

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

p, p .yshortcuts {color: black}
a, .yshortcuts a {color: blue}

По сути, вам придется делать это вездечто color определено в вашем CSS (при условии, что Yahoo! может сделать это с любым текстом).Это не так элегантно, как другие решения, но должно работать для IE6.

0 голосов
/ 15 июля 2010

Вы можете попробовать 

.yshortcuts { color: auto !important }

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

Если это не сработает, я думаю, вам придется заменить его определенным новым цветом.

...