Можно ли фильтровать элементы html электронной почты, используя HTML5 и CSS3 из кнопок меток?
Я тестировал этот код: https://jsfiddle.net/Xeoncross/kQpAf/ в контексте html-фильтрации электронной почты.
Идея состояла в том, чтобы фильтровать элементы тела письма (предпочтительные таблицы или строки), щелкая в некоторых ярлыках.
Используя Mozilla Thunderbird, я смог отправить мне электронное письмо с этим HTML-кодом и однажды получил, что фильтрация работает (проверено на версии 45.8.0).
Можно ли расположить кнопки меток внутри других элементов, таких как ul (в горизонтальной панели навигации)? Как устроить селекторы родного брата? Можно ли отфильтровать отдельные элементы htm в виде таблиц или строк данных с помощью кнопок меток на панели навигации?
Это код, который я тестирую:
<!DOCTYPE html>
<html>
<title>Source: https://jsfiddle.net/Xeoncross/kQpAf/</title>
<head>
<style>
.header-box {
border: 3px solid red;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border: none;
text-align: left;
padding: 8px;
}
div[data-filter="red"]{
background:red;
}
div[data-filter="green"]{
background:green;
}
div[data-filter="blue"]{
background:blue;
}
a:focus[data-filter]{
opacity:.8;
outline:none;
}
a[data-filter="red"]:focus ~ div:not([data-filter="red"]){
height:0px;
width:0px;
border:none;
margin:0;
font-size:0px;
}
a[data-filter="green"]:focus ~ div:not([data-filter="green"]){
height:0px;
width:0px;
border:none;
margin:0;
font-size:0px;
}
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]){
height:0px;
width:0px;
border:none;
margin:0;
font-size:0px;
}
</style>
</head>
<body>
<h2>adapted from: https://jsfiddle.net/Xeoncross/kQpAf/</h2>
<div class="header-box">
<p>This fail:</p>
<a href="#" data-filter="all" tabindex="-1" moz-do-not-send="true">ALL</a>
<a href="#" data-filter="red" tabindex="-1" moz-do-not-send="true">RED</a>
<a href="#" data-filter="green" tabindex="-1" moz-do-not-send="true">GREEN</a>
<a href="#" data-filter="blue" tabindex="-1" moz-do-not-send="true">BLUE</a>
<br>
</div>
<br><br>
<p>Working Ok:</p>
<br>
<a href="#" data-filter="all" tabindex="-1" moz-do-not-send="true">ALL</a>
<a href="#" data-filter="red" tabindex="-1" moz-do-not-send="true">RED</a>
<a href="#" data-filter="green" tabindex="-1" moz-do-not-send="true">GREEN</a>
<a href="#" data-filter="blue" tabindex="-1" moz-do-not-send="true">BLUE</a>
<br><br>
<div data-filter="red" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="blue" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="red" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="blue" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="green" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="red" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="red" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="red" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="blue" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="green" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="blue" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="green" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
<div data-filter="green" style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
Некоторые ссылки:
https://jsfiddle.net/Xeoncross/kQpAf/
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
Примечание: всегда нужно добавлять это: moz-do-not-send="true" в каждом href, пример:
..href = "# openModal" moz-do-not-send = "true"..
Примечания: протестировано в нескольких версиях Mozilla Thunderbird и отображает модальное окно из текстовой ссылки, также нормально закрывая модальное окно. Но я ищу способ фильтрации, более похожий на первую ссылку выше.
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors
4 метода CSS3 с вкладками контента, Ян Ханссон: http://csscience.com/css3-tabs/
Область с вкладками только для CSS3, Крис Койер: https://css-tricks.com/css3-tabs/
Примечание: метод взлома с помощью интерактивного флажка не работает для последних версий Thunderbird (тестирование завершилось неудачно на 45.8.0, но на удивление работает нормально со старой версией 13.0.1). См. Например: https://www.emailonacid.com/blog/article/email-development/beating-thunderbirds-checkbox-bug-and-targeting-techniques
Следующие ссылки основаны на взломе флажков, а затем отбрасываются в поисках простых решений.
http://freshinbox.com/blog/interactive-tabs-for-email/
Примечание. Ошибка в последних версиях Thunderbird. Для тестов не забывайте всегда добавлять moz-do-not-send = "true", например:
..href = "#" style = "color: # BDD4FC;" Мос-ду-не-посыла = "истинный"..
https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email
https://www.webdesignerdepot.com/2015/10/punched-card-coding-the-secret-of-interactive-email/
https://codepen.io/TimPietrusky/pen/fHmiI
Обратите внимание, что в этом примере элемент span находится внутри элемента div (отделенного от флажка), который связан с моим вопросом.
Примечание: в моих тестах с Thunderbird кажется необходимым всегда добавлять moz-do-not-send = "true", чтобы вставлять ссылки на локальные файлы в теле письма, например:
..href = "file: /////MYLOCALSERVER/myfolder/temp.html" moz-do-not-send = "true"..