strokoff
История маленького обновления на webislife
В этой заметке хочу поделиться одним маленьким обновлением, которое произошло на сайте, а именно — добавление стилей для упоминания браузеров в статьях — Chrome Firefox Safari Edge чуть поговорим о семантике и посмотрим как это реализовано у серьезных сайтов типа web.dev
Предыстория
В этой ленте можно встретить переводы с зарубежных ресурсов, все переводы на этом сайте выполнены добровольно и авторы могут поддержать дискуссию на ту тему, что переводят в статье, авторов на зарплате ради кармы на ресурсе тут не предвидится) Так вот, переводя свежую статью с обзором новинок от команды chrome New to the web platform in January в теле статьи встречался блок, в котором перечислены браузеры и версии которые они поддерживают.
Конечно же я мог бы сверстать также, но вопрос в поддержке, таким хочется пользоваться там где это уместно и желательно каждым браузером по отдельности, давайте посмотрим на верстку в оригинале
<div class="wdi-browser-compat">
<span class="wdi-browser-compat__label">Browser support</span>
<span class="wdi-browser-compat__items">
<span class="wdi-browser-compat__icon" data-browser="chrome">
<span class="visually-hidden">chrome preview, Preview</span>
</span>
<span class="wdi-browser-compat__version" data-compat="preview">👁</span>
<span class="wdi-browser-compat__icon" data-browser="firefox">
<span class="visually-hidden">firefox 109, Supported</span>
</span>
<span class="wdi-browser-compat__version" data-compat="yes">109</span>
<span class="wdi-browser-compat__icon" data-browser="edge">
<span class="visually-hidden">edge, Not supported</span>
</span>
<span class="wdi-browser-compat__version" data-compat="no">×</span>
<span class="wdi-browser-compat__icon" data-browser="safari">
<span class="visually-hidden">safari, Not supported</span> </span>
<span class="wdi-browser-compat__version" data-compat="no">×</span>
</span>
<a class="wdi-browser-compat__link" href="https://developer.mozilla.org/docs/Web/API/Element/scrollend_event#browser_compatibility" target="_blank">Source</a>
</div>
Монументально, я бы та охарактеризовал это. Вроде идет внутри article семантично блок div в котором 3 строки, но потом что-то идет не так и в строке span появляется еще span в котором еще span и уже внутри есть текст, в промежуточных узлах его нет.Там еще и data-compat прикрутили явно не с проста.
Не скопипастил, а вдохновился
Как бы такое монументальное величие переиспользовать в статьях на webislife? И не переписывать наш редактор wc-wysiwyg о котором я расскажу чуть позже, потестить редактор можно. только если вы сами хотите что-то опубликовать на webislife или его простую версию ищите в форме комментариев.
Немного переосмыслив данный подход, я пришел к выводу, что упоминание браузера в статье или серии браузеров вообще не обязательно должно быть таким блоком и мы можем получить +- такую же верстку только при помощи инлайновых элементов (если не считать, что мы ими пользуемся внутри параграфов > p внутри статьи article
span {
&.-browser {
display: inline-flex;
align-items: baseline;
flex-wrap: nowrap;
font-size: 1em;
line-height: 1em;
padding: 3px;
border-radius: 1em;
padding-right: 0.5em;
background: var(--color-blue-50);
&::before {
content: '';
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
display: inline-block;
height: 1em;
margin-right: 0.25em;
margin-left: 0.25em;
width: 1em;
}
&.-chrome::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' viewBox='0 0 190 190'%3E%3ClinearGradient id='d' x1='28.3' x2='80.8' y1='75' y2='44.4' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23a52714' stop-opacity='.6'/%3E%3Cstop offset='.7' stop-color='%23a52714' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='109.9' x2='51.5' y1='164.5' y2='130.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23055524' stop-opacity='.4'/%3E%3Cstop offset='.3' stop-color='%23055524' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='121.9' x2='136.6' y1='49.8' y2='114.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ea6100' stop-opacity='.3'/%3E%3Cstop offset='.7' stop-color='%23ea6100' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='a' cx='91.2' cy='55' r='84.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%233e2723' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%233e2723' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='i' cx='20.9' cy='47.5' r='78' xlink:href='%23a'/%3E%3CradialGradient id='j' cx='94.8' cy='95.1' r='87.9' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23263238' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23263238' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='33.3' cy='31' r='176.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='b'%3E%3Ccircle cx='95' cy='95' r='88'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23b)'%3E%3Cuse fill='%23db4437' xlink:href='%23c'/%3E%3Cuse fill='url(%23d)' xlink:href='%23c'/%3E%3Cuse fill='%230f9d58' xlink:href='%23e'/%3E%3Cuse fill='url(%23f)' xlink:href='%23e'/%3E%3Cuse fill='%23ffcd40' xlink:href='%23g'/%3E%3Cuse fill='url(%23h)' xlink:href='%23g'/%3E%3Cg fill-opacity='.1'%3E%3Cpath fill='%233e2723' d='M61.3 114.7L21 47.4l39 67.8z'/%3E%3Cpath fill='%23263238' d='M128.8 116.3l-.8-.4-37.3 67 38.3-67z'/%3E%3C/g%3E%3Cpath id='e' d='M7 183h83.8l39-39v-29H60.2L7 23.5z'/%3E%3Cpath id='g' d='M95 55l34.6 60L91 183h92V55z'/%3E%3Cpath id='c' d='M21 7v108h39.4L95 55h88V7z'/%3E%3Cpath fill='url(%23a)' d='M95 55v21l78.4-21z'/%3E%3Cpath fill='url(%23i)' d='M21 47.5l57.2 57.2L60.4 115z'/%3E%3Cpath fill='url(%23j)' d='M90.8 183l21-78.3 17.8 10.3z'/%3E%3Ccircle cx='95' cy='95' r='40' fill='%23f1f1f1'/%3E%3Ccircle cx='95' cy='95' r='32' fill='%234285f4'/%3E%3Ccircle cx='95' cy='95' r='88' fill='url(%23k)'/%3E%3Cg fill='%233e2723' fill-opacity='.1'%3E%3Cpath fill='%23fff' d='M129.6 115a40 40 0 01-69.2 0L7 24.5 60.4 116a40 40 0 0069.2 0z'/%3E%3Cpath d='M96 55h-.5a40 40 0 110 80h.5c22 0 40-18 40-40s-18-40-40-40zm-1 127a88 88 0 0088-87.5v.5A88 88 0 017 95v-.5A88 88 0 0095 182z'/%3E%3Cg fill-opacity='.2'%3E%3Cpath fill='%23fff' d='M130 116.3a39.3 39.3 0 003.4-32 38 38 0 01-3.8 30.7L92 183l38.2-66.5zM95 8a88 88 0 0188 87.5V95A88 88 0 007 95v.5A88 88 0 0195 8z'/%3E%3Cpath d='M95 54c-22 0-40 18-40 40v1c0-22 18-40 40-40h88v-1z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
&.-firefox::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3CradialGradient id='ff-b' cx='428.5' cy='55.1' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23ffbd4f'/%3E%3Cstop offset='.2' stop-color='%23ffac31'/%3E%3Cstop offset='.3' stop-color='%23ff9d17'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff563b'/%3E%3Cstop offset='.5' stop-color='%23ff3750'/%3E%3Cstop offset='.7' stop-color='%23f5156c'/%3E%3Cstop offset='.8' stop-color='%23eb0878'/%3E%3Cstop offset='.9' stop-color='%23e50080'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-c' cx='245.4' cy='259.9' r='501' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%23960e18'/%3E%3Cstop offset='.3' stop-color='%23b11927' stop-opacity='.7'/%3E%3Cstop offset='.4' stop-color='%23db293d' stop-opacity='.3'/%3E%3Cstop offset='.5' stop-color='%23f5334b' stop-opacity='.1'/%3E%3Cstop offset='.5' stop-color='%23ff3750' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-d' cx='305.8' cy='-58.6' r='363' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.3' stop-color='%23ffdc3e'/%3E%3Cstop offset='.5' stop-color='%23ff9d12'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-e' cx='190' cy='390.8' r='238.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%233a8ee6'/%3E%3Cstop offset='.5' stop-color='%235c79f0'/%3E%3Cstop offset='.7' stop-color='%239059ff'/%3E%3Cstop offset='1' stop-color='%23c139e6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-f' cx='252.2' cy='201.3' r='126.5' gradientTransform='matrix(1 0 0 1 -48 31)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E");
}
&.-edge::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 27600 27600'%3E%3ClinearGradient id='A' gradientUnits='userSpaceOnUse'/%3E%3ClinearGradient id='B' x1='6870' x2='24704' y1='18705' y2='18705' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%230c59a4'/%3E%3Cstop offset='1' stop-color='%23114a8b'/%3E%3C/linearGradient%3E%3ClinearGradient id='C' x1='16272' x2='5133' y1='10968' y2='23102' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%231b9de2'/%3E%3Cstop offset='.16' stop-color='%231595df'/%3E%3Cstop offset='.67' stop-color='%230680d7'/%3E%3Cstop offset='1' stop-color='%230078d4'/%3E%3C/linearGradient%3E%3CradialGradient id='D' cx='16720' cy='18747' r='9538' xlink:href='%23A'%3E%3Cstop offset='.72' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.53'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='E' cx='7130' cy='19866' r='14324' gradientTransform='matrix(.14843 -.98892 .79688 .1196 -8759 25542)' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E");
}
&.-safari::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='195 190 135 135'%3E%3Cstyle%3E.b%7Bcolor-interpolation-filters:srgb%7D.c%7Bflood-opacity:.31%7D%3C/style%3E%3Cdefs%3E%3ClinearGradient id='s-a' x1='132.6' x2='134.4' y1='111.7' y2='-105.3' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23d2d2d2'/%3E%3Cstop offset='.5' stop-color='%23f2f2f2'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='s-b' gradientUnits='userSpaceOnUse'/%3E%3ClinearGradient id='s-c' x1='65.4' x2='67.4' y1='115.7' y2='17.1' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23005ad5'/%3E%3Cstop offset='.2' stop-color='%230875f0'/%3E%3Cstop offset='.3' stop-color='%23218cee'/%3E%3Cstop offset='.6' stop-color='%2327a5f3'/%3E%3Cstop offset='.8' stop-color='%2325aaf2'/%3E%3Cstop offset='1' stop-color='%2321aaef'/%3E%3C/linearGradient%3E%3ClinearGradient id='s-d' x1='158.7' x2='176.3' y1='96.7' y2='79.5' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%23c72e24'/%3E%3Cstop offset='1' stop-color='%23fd3b2f'/%3E%3C/linearGradient%3E%3Cfilter id='s-e' class='b'%3E%3CfeFlood flood-opacity='.3'/%3E%3CfeComposite in2='SourceGraphic' operator='in'/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeOffset dy='3'/%3E%3CfeComposite in='SourceGraphic'/%3E%3C/filter%3E%3Cfilter id='s-f' class='b'%3E%3CfeFlood class='c'/%3E%3CfeComposite class='c' in2='SourceGraphic' operator='out'/%3E%3CfeGaussianBlur flood-opacity='.3' stdDeviation='.7'/%3E%3CfeOffset dy='2'/%3E%3CfeComposite in2='SourceGraphic' operator='atop'/%3E%3C/filter%3E%3Cfilter id='s-g' class='b'%3E%3CfeFlood flood-opacity='.6'/%3E%3CfeComposite in2='SourceGraphic' operator='in'/%3E%3CfeGaussianBlur stdDeviation='.5'/%3E%3CfeOffset dx='1' dy='1'/%3E%3CfeComposite in='SourceGraphic' result='A'/%3E%3CfeColorMatrix values='0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0'/%3E%3CfeFlood flood-opacity='.4'/%3E%3CfeComposite in2='A' operator='in'/%3E%3CfeGaussianBlur stdDeviation='3.8'/%3E%3CfeOffset dx='2' dy='3'/%3E%3CfeComposite in='A'/%3E%3C/filter%3E%3Cfilter id='s-h' width='110%25' height='110%25' x='-1%25' y='-1%25'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='.4'/%3E%3CfeOffset/%3E%3CfeComponentTransfer result='A'%3E%3CfeFuncA type='linear'/%3E%3C/feComponentTransfer%3E%3CfeFlood flood-color='rgba(0,0,0,0.5)'/%3E%3CfeComposite in2='A' operator='in'/%3E%3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3CradialGradient id='s-i' cx='-69.9' cy='69.3' r='54' gradientTransform='matrix(.9 -.01 .04 2.72 -9 -120)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231e8ceb'/%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%235d96eb'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' filter='url(%23s-e)' ry='49' transform='matrix(.57 0 0 .57 187 256)'/%3E%3Cg filter='url(%23s-f)' transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54'/%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54'/%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)'/%3E%3Cg filter='url(%23s-g)' transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z'/%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z'/%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z'/%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z'/%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' filter='url(%23s-h)' transform='translate(-65 8)'/%3E%3C/svg%3E");
}
}
}
Единственное, что я забрал с оригинала, так это иконки в svg в таком же виде из стилей как и в оригинале) не свои же лого браузеров рисовать?) В оригинале статьи все размеры еще указаны в px по этому способы применения весьма ограничены, давайте давайте попробуем применить написанные стили и повторить примерно блок верстки из статьи:
Поддержка браузерами — 👁️ 109 ❌ ❌
<p>
<span class="-browser -chrome">👁️</span>
<span class="-browser -firefox">109</span>
<span class="-browser -edge">❌</span>
<span class="-browser -safari">❌</span>
</p>
Очевидно получилось куда меньше разметки и она стала семантичнее — есть параграф P в котором 4 упоминания браузеров в виде четырех span, все сходится. Набирать и оформлять теперь такое одно удовольствие) также это работает и в комментариях на этом сайте.
+ верстки в em 2em Chrome 3em Firefox 0.5em Safari 1em Edge
Такое вот сегодня на сайте вышло, присоединяйтесь к коллективной ленте постов webislife) критику и дополнения приветствуются в комментариях
Последняя редакция 8 февраля, 2023 в 12:02