야후 메일 브라우저 타겟팅 CSS

브라우저에서 야후 메일 CSS를 타겟팅하기위한 해킹이 있었는지 궁금합니다. 특히, 인라인 CSS가 아니라 전자 메일의 태그 내에있는 야후 생성 클래스.야후 메일 브라우저 타겟팅 CSS

내가 직면 한 문제는 다음과 같습니다. 캠페인에 대한 반응 형 템플릿을 코딩했으며, 모든 운영체제와 모든 주요 메일 클라이언트에서 작동하는 것처럼 야후는 다른 곳에서는 찾아 볼 수없는 버크를 가지고 있습니다. 일반 쿼리를 읽는 것처럼 태그를 읽으며 미디어 쿼리를 건너 뜁니다 (실제로는 스타일링으로 간주되는 모든 코드가 변경됩니다). 이것이 의미하는 바는 다음과 같습니다. 아래에서 위로 스타일을 읽으므로 컴퓨터 화면과 같이 큰 장치에서 읽더라도 작은 화면 스타일을 전자 메일에 적용합니다. 내 HTML로 작성된 다른 응답 가능 메일 클라이언트에서 인식, 내 코드는 여기

<style type="text/css"> 

_filtered #yiv6637726198 { 
text-align:left;} 
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical- align:middle !important;height:20px !important;} 
#yiv6637726198 

_filtered #yiv6637726198 { 
} 
#yiv6637726198 .yiv6637726198main {width:100%;} 
#yiv6637726198 .yiv6637726198header {width:100%;} 
#yiv6637726198 .yiv6637726198header-img {width:100%;height:auto;} 
#yiv6637726198 .yiv6637726198logo-img {width:75px;height:30px;} 
#yiv6637726198 .yiv6637726198icon-img {width:19px;height:18px;} 
#yiv6637726198 .yiv6637726198icon-wrap {width:19px;} 
#yiv6637726198 .yiv6637726198button {width:100%;height:auto;} 
#yiv6637726198 .yiv6637726198footer {display:none;} 
#yiv6637726198 .yiv6637726198footer-size {width:100%;} 
#yiv6637726198 .yiv6637726198btn {width:100px !important;height:auto !important;} 
#yiv6637726198 .yiv6637726198text {font-size:9px !important;text-align:center;} 
#yiv6637726198 .yiv6637726198smaller {width:5px !important;height:5px !important;} 
#yiv6637726198 .yiv6637726198show {display:block;} 
#yiv6637726198 .yiv6637726198title {font-size:12px !important;} 
#yiv6637726198 .yiv6637726198date {font-size:9px !important;line-height:14px !important;} 
#yiv6637726198 .yiv6637726198smaller {width:10px !important;} 
#yiv6637726198 .yiv6637726198small-hide {display:none;} 
#yiv6637726198 .yiv6637726198row {display:table-row;text-align:left;} 
#yiv6637726198 .yiv6637726198row-center {display:table-row;text-align:center;vertical- align:middle !important;height:20px !important;} 
#yiv6637726198 

</style>

그리고 :

<style type="text/css"> 

@media (max-width:321px) { 
    .row { display:table-row !important; text-align:left !important; } 
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important; } 
    } 

    @media (max-width:241px) { 
    .hide { display:none !important; } 
    .main { width:100% } 
    .header { width:100%; } 
    .header-img { width:100%; height:auto; } 
    .logo-img { width:75px; height:30px; } 
    .icon-img { width:19px; height:18px; } 
    .icon-wrap { width:19px; } 
    .button { width:100%; height:auto; } 
    .footer { display:none !important; } 
    .footer-size { width:100% } 
    .btn { width:100px !important; height:auto !important } 
    .text { font-size:9px !important; text-align:center !important; } 
    .smaller { width:5px !important; height:5px !important; } 
    .show { display:block; } 
    .title { font-size:12px !important; } 
    .date { font-size:9px !important; line-height:14px !important; } 
    .smaller { width:10px !important } 
    .small-hide { display:none !important; } 
    .row { display:table-row !important; text-align:left !important; } 
    .row-center { display:table-row !important; text-align:center !important; vertical-align:middle !important; height:20px !important; } 
    } 

    </style>

는 야후 메일에 의해 처리 된 후 모습입니다

(전체 코드를 보여주는 것이 너무 많은 부분을 차지함에 따라 전체적인 일부분임을 이해할 수 있습니다.)

또한 내 인라인 CSS는 html-email에 대해 필요에 따라 올바르게 수행됩니다.

자, 혹시 혹시 조금 해킹 해 보셨습니까? 여기에 작은 질문이 있습니다. 중요하게 활성화 된 미디어 쿼리보다 중요한 인라인! 중요성이 있습니까?

도움 주셔서 감사합니다. 그런이나 뭐, 같은 모든 요소를 스타일링하여 : 몇 가지 테스트와 //

// UPDATE 1, 그는 "전체 너비"미디어 쿼리를 (900px 최대 폭)을 지정하여 발견 중요도가있는 인라인 스타일로, 그리고 내 미디어 쿼리의 순서를 뒤집어서 (순서가 뒤 바뀌 었음에도 이제 분 너비를 추가 함) 야후 메일이 전체 이메일 스타일을 결정합니다. 모든 응답을 없애지 만 최소한 전체 레이아웃을 깨거나 달과 뒤쪽으로 늘리지는 않습니다 ...

출처

2013-10-03 R Lacorne

야후! Mail은 CSS 파서를 수정했습니다 (실제). 내 대답을 업데이트 할게. –