Paul_King Feb 18 2016 at 15:49

Несколько неочевидных frontend-хитростей

4 min

92K

ex-Wargaming corporate blogCSS*HTML*

Tutorial

+22

Comments 68

Yeah Feb 18 2016 at 16:44

Но мы можем сделать ход конем и добавить SVG на страницу с помощью iframe или object:

Главное — смотреть, чтобы при этом этот SVG не порезался каким-нибудь АдБлокером

GreatRash Feb 18 2016 at 16:52

Зачем iframe и object, если SVG можно вставлять напрямую в HTML?

Paul_King Feb 18 2016 at 17:27

А зачем писать CSS в отдельных файлах, если можно оформлять элементы прямо в HTML?)

Мы делаем код красивее и лаконичнее.
Отделяем струкруту документа от изображений.

ImKremen Feb 18 2016 at 18:09

Не обязательно их "руками" вставлять, пусть это делается при сборке.

Paul_King Feb 18 2016 at 18:24

Это понятно. Когда есть возможность, можно все автоматизировать. У нас на одном из проектов использовался js скрипт, который вытягивал исходный код SVG из тега <img /> и вставлял на страницу. Но, в любом случае, это идет во вред размеру страницы или производительности. Иногда это заметно, а иногда нет.
Если вариант с iframe проще и он работает, то почему бы его не использовать?

Ohar Feb 18 2016 at 19:06

Вы хотите сказать, что iframe с SVG лучше по размеру или производительности, чем тот же SVG, вставленный в HTML?

Paul_King Feb 18 2016 at 21:13

iframe — нет, object — да.

Finom Feb 18 2016 at 21:52

Почему?

Paul_King Feb 19 2016 at 09:45

Потому что

<object data="icon.svg" type="image/svg+xml"></object>

короче, чем

<iframe frameborder="0" src="icon.svg">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 15" enable-background="new 0 0 17 15" xml:space="preserve">
<defs>
<rect x="3" y="5" width="5" height="4">
<rect x="9" y="5" width="5" height="4">
<rect x="3" y="10" width="5" height="4">
<rect x="9" y="10" width="5" height="4">
<path d="M11,0C9.9,0,9,0.9,9,2H8c0-1.1-0.9-2-2-2C4.9,0,4,0.9,4,2s0.9,2,2,2l2.5,0L11,4c1.1,0,2-0.9,2-2S12.1,0,11,0 z M7,3H6C5.4,3,5,2.6,5,2s0.4-1,1-1c0.6,0,1,0.4,1,1V3z M11,3h-1V2c0-0.5,0.4-1,1-1c0.5,0,1,0.5,1,1S11.5,3,11,3z">
</svg>
</iframe>

GreatRash Feb 19 2016 at 10:09

Но ведь лишний запрос на сервер, да и в SVG есть use, правда не уверен, что shadow dom позволяет для него CSS писать.

Paul_King Feb 19 2016 at 10:15

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

Large Feb 19 2016 at 10:41

symbol и use вам помогут, если есть цсс анимации — тогда беда (обсуждали в предыдущих темах)

Paul_King Feb 19 2016 at 10:50

Можете написать подробнее или дать ссылку на пример?

Large Feb 19 2016 at 11:03

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

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

Paul_King Feb 19 2016 at 11:13

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

Large Feb 19 2016 at 13:52

Панацеи нет. Вот тут сделан обзор разных методов подключения свг. По поводу размера набора — можно разделить иконки на уникальные для страницы и общие для 90% страниц. Так что это не большая беда.

GreatRash Feb 20 2016 at 10:04

Кстати symbol не особо и нужен, ибо можно просто создать группу (g) с id и юзать её.

Large Feb 20 2016 at 13:08

Это как с template — не нужно дополнительно скрывать и браузер не будет обрабатывать эту часть до использования use. А так конечно — можно использовать, просто будут дополнительные затраты. В случае с анимацией так и приходится делать.

i360u Feb 19 2016 at 11:14

Можно использовать веб-компоненты и не извращаться с отдельным js, вытягивающим код SVG. И с чего вы взяли, что SVG во внешнем файле это более легкое и производительное решение? В обоих случаях фетчится и рендерится XML, только в случае с внешним файлом вы еще получаете отдельный запрос, как минимум. А еще SVG можно вставлять в CSS, и LESS, к примеру, этот процесс умеет автоматизировать.

dom1n1k Feb 18 2016 at 22:28

Ну если одна иконка используется на странице N раз, то что ещё делать?

Fen1kz Feb 18 2016 at 17:15

HTML5 + CSS3

.dotted {
text-decoration-style: dotted;
}
.wavy {
text-decoration-style: wavy;
}

Это жестоко. Нехватает только text-decoration: blink и text-decoration: marquee

Учтите, что в данный момент работают новые свойства только в Firefox и, частично, в Safari.
…
Надеюсь, описанные здесь вещи показались вам интересными, а кому-то даже пригодятся на практике.

Надеюсь никому и никогда это не пригодится на практике.

Paul_King Feb 18 2016 at 17:36

На многих сайтах есть псевдоссылки, оформленные с помощь border-bottom: dotted (например, ссылка "Написать комментарий на Хабре"). Разве не логичнее было бы оформить ее через text-decoration: underline dotted, раз уже это ссылка?

text-decoration-style: wavy; тоже вполне может пригодится, дизайны-то бывают разные. В школе мы подчеркивали прилагательные волнистой линией, так почему в CSS у нас не должно быть возможности подчеркнуть прилагательное правильно?

Fen1kz Feb 18 2016 at 18:16

Потому что wavy переходит ту грань, где уже css начинает управлять дизайнером, а не дизайнер управляет css. То самое, от чего ушли в html, теперь возвращается в css (тег u, например).
Вместо инструмента нам дают готовый кусочек дизайна и это считается нововведением. Отвратительно.

Paul_King Feb 18 2016 at 18:39

Не совсем понимаю, почему text-decoration: underline или border-style: dotted — это инструмент, а text-decoration-style: wavy — кусочек дизайна, управляющий дизайнером?

Ohar Feb 18 2016 at 19:09

Вы не поделитесь своим инструментом для подчёркивания текста волнистой линией с помощью CSS?

Fen1kz Feb 18 2016 at 19:24

Давайте. Итак, я выступаю против "инструмента для подчёркивания текста волнистой линией", потому что он слишком специализирован.
Соответственно, чтобы расширить специализацию, можно предложить инструмент для подчеркивания текста любым паттерном. Хотя и это слишком узко. Мне бы подошел инструмент для рисования линейных паттернов на любом элементе.

Пожалуйста, вот он: border-image.

Уже сейчас вы можете рисовать волнистые, квадратнистые, и любые другие *истые линии на Ваше усмотрение (http://caniuse.com/#feat=border-image)

Или ждать пока большинство производителей даст вам возможность выбрать из… скольки? четырех? пяти? паттернов (http://caniuse.com/#search=text-decoration-style)

Встречный вопрос — как вы вообще посмели называть text-decoration-style инструментом для подчёркивания текста волнистой линией, если он поддерживается только в Firefox и Safari, в 18.53% браузерах по данным caniuse?

ImKremen Feb 18 2016 at 19:31

text-decoration-style это претендент на "инструмент для подчёркивания текста волнистой линией": https://drafts.csswg.org/css-text-decor-3/#text-decoration-style-property

Fen1kz Feb 18 2016 at 19:54

text-decoration-style это "претендент на инструмент для подчёркивания текста волнистой линией"

кавычку не там поставили.

В любом случае — я против и таких "претендентов", и таких "инструментов", по причинам выше.

Paul_King Feb 19 2016 at 10:13

Любые инструменты — это новые возможности, что, априори, здорово. А ЗЛО — это то, что из этого сотворит плохой дизайнер или разработчик. Можно и с помощью только одобренных вами инструментов создать люто убогий сайт.

Почему бы нам не получить в распоряжение стандартное средство для подчеркивания ошибок и прилагательных (wavy), глаголов (double), наречий и псевдоссылок (dashed)? Давайте тогда и обычный text-decoration уберем, и будем обычное подчеркивание оформлять только border-ом!

Fen1kz Feb 19 2016 at 14:26

Можно и с помощью только одобренных вами инструментов создать люто убогий сайт.

Можно создать люто убогий сайт вообще без CSS, так что ваш комментарий бесполезен чуть более чем полностью.

Почему бы нам не получить в распоряжение стандартное средство для подчеркивания ошибок и прилагательных (wavy), глаголов (double), наречий и псевдоссылок (dashed)?

Потому что настолько специализированные стандарты не работают. Вот не работают и все, никто это не будет использовать. Доказано Web 1.0 сайтами.

Paul_King Feb 19 2016 at 14:47

Так что насчет text-decoration? Нужно его убрать или нет, по-вашему?

Fen1kz Feb 19 2016 at 14:57

оставить как legacy и не развивать.

Balek Feb 22 2016 at 01:05

border'ом не получится подчеркнуть многострочный текст.

Paul_King Feb 22 2016 at 10:19

Получится. но только с inline-block.

Ohar Feb 18 2016 at 19:48

Внезапно. Спасибо, буду знать про товарища border-image.

Paul_King Feb 18 2016 at 21:42

Имхо, text-decoration-style: wavy лучше чем border-image: url(wavy.png). Зачем нам картинки, если того же самого можно добиться CSS-ом?

SerafimArts Feb 19 2016 at 01:05

Наверное затем, что картинку можно кастомизировать, а это подчёркивание (пока что) нет. Более того — подобную картинку можно перегнать в base64. Я конечно понимаю, что 100 символов base64 картинки 5х5 пикселей больше 4х для "wavy", но с другой стороны инструмент намного гибче. Именно по-этому браузеры\стандарты имеют в последнее время развиваться в сторону теневого DOM, когда куча монолитных элементов могут разбиваться на тучу кастомизированных примитивов.

Так что я соглашусь — подобное подчёркивание — зло, но не столь серьёзное, как монолитные инпуты или селект. С другой стороны никто же не мешает забить на этот wavy и грузить ту же самую картинку.

Paul_King Feb 19 2016 at 10:05

Конечно, картинки нам дают намного больше гибкости. Но если подойдет стандартное подчеркивание, почему бы его не использовать?
Зачем нам тогда text-decoration: underline, если есть border-bottom?

bolk Feb 19 2016 at 07:18

Они на разных уровнях находятся. border — под базовой линией. Так что неравная замена. wavy нужно для подчёркивания ошибок.

TNK Feb 18 2016 at 17:35

scroll-behavior это не только CSS, но и JS:

window.scroll({ left, top, behavior });
window.scrollTo({ left, top, behavior });
window.scrollBy({ left, top, behavior });
element.scrollIntoView(ScrollOptions);

Для JS есть polyfill.

Paul_King Feb 18 2016 at 17:43

В том-то и дело, что JS необязателен, если мы перематываем страницу к якорям стандартными средставами HTML (<a href="#some-block"></a>).

Если же мы все-таки используем js, нам не нужно заморачиваться описыванием работы анимации. Мы только указываем, куда прокрутить страницу.

За полифил спасибо, пригодится)

friday Feb 18 2016 at 17:57

Меня, скорее всего, сейчас заминусуют, но всё-таки зачем этот пост?

Paul_King Feb 18 2016 at 18:01

Думаю, чтобы узнать что-то новое. А наскольео эти знания полезны, решать вам.

Aux Feb 19 2016 at 02:17

Ничего нового не узнал. Пост первооткрывателейCSS3?

Paul_King Feb 19 2016 at 09:52

Могу только искренне позавидовать вашей эрудиции)

indrauolles Feb 18 2016 at 18:11

С SVG можно поступить так:

все svg помещаются в папку, с помощью плагина gulp-svg-sprite автоматически собирается спрайт
в "разработческом" html подключаем спрайт и ссылаемся на его элементы (плагин gulp-file-include).
Например:
```
<div class="infographics_svg_sprite" style="display: none;">>@@include('../symbol/svg/sprite.symbol.svg')</div>
...
<svg>
<use xlink:href="#britain_digits"/>
</svg>
```
собираем итоговый html. Вот он-то и будет захламленным, но поскольку код мы пишем не там, то нам будет всё равно.

Paul_King Feb 18 2016 at 18:34

Да, со сборщиками все куда проще, но ведь размер итоговой html страницы тоже имеет значение.
Вы привели хороший пример, но вариант с iframe мне тоже кажется интересным. Если он работает, то почему бы и нет?)

ImKremen Feb 18 2016 at 18:50

Имхо, количество запросов критичнее размера страницы.

Paul_King Feb 18 2016 at 20:56

Зависит от самой страницы.
К примеру, на странице с лентой новостей много повторяющихся иконок (поделиться, комментировать, количество просмотров и т.д. ). В случае с object, мы получим 1 запрос на каждую картинку и гораздо меньше итогового кода.
К сожалению, для стилизации SVG нет идеального метода. Приходится выбирать меньшее из зол.

Aux Feb 19 2016 at 02:19

Ничего плохого в object нет, картинки-то вставляем через img, видео через videoи никто не жалуется.

lifestyle Feb 18 2016 at 19:18

> text-decoration сразу несколько значений (причем это работает уже очень давно)

But then
> text-decoration-color
> text-decoration-style
WTF! Неужели такое свойство «работает уже очень давно», а я верстал блядские псевдоссылки и нестандартное подчеркивание через border-bottom

> новые свойства только в Firefox и, частично, в Safari
Okay

Paul_King Feb 18 2016 at 21:17

Вы не совсем поняли.

несколько значений в text-decoration — работает давно
text-decoration-color и text-decoration-style — только в Firefox и, частично, в Safari

Razunter Feb 18 2016 at 19:44

Какая-то подборка вредных советов…
1) Text-decoration ладно, может быть полезным, но раз пока нет поддержки в Chromium, то и говорить не о чём.
2) За плавную прокрутку карать. Бесит везде, где появляется.
3) С новой строкой куда проще будет

.break:after {
content: '';
display: block;
}

Paul_King Feb 18 2016 at 21:38

1) ПОКА нет. Можете считать это анонсом. Знать, какие свойства появятся в будущем лишним не будет.
2) За что карать? Мне вот нравится понимать, куда проматывается страница по отношению к тому месту, где я находился.
3) C display: block могут быть проблемы, если рядом есть элементы с float. Мне кажется, растягивание псевдоэлемента на всю ширину может быть чревато другими последствиями. Правильнее будет просто перенести текст на новую строку, вместо того, чтобы разделять текст блоками.

romy4 Feb 18 2016 at 19:58

а в HTML лезть не хочется (или невозможно),

но всё равно без того, что бы лезть в html не получится сделать. В примере нужно слово обрамляется классом, что не сделаешь без того, чтобы не лезть в html.

Paul_King Feb 18 2016 at 20:58

Разумеется!
Подразумевалось, что у нас есть возможность обратиться к нужному месту через селектор.

firya Feb 19 2016 at 12:17

Если есть возможность обрамить текст тегом, то всегда будет проще поставить br
У указанного метода есть одна неприятная особенность, работает он только с inline элементами, перенести inline-block таким способом нельзя

lain8dono Feb 19 2016 at 00:23

Но мы можем сделать ход конем и добавить SVG на страницу с помощью <iframe> или <object>

А можно просто "полифил" сделать. Например вот так:

var styles = document.querySelectorAll('svg style')
for (var i = 0, l = styles.length; i < l; i++) {
    document.head.appendChild(styles[i])
}

Paul_King Feb 19 2016 at 07:42

Селектором svg styles мы.не сможем обратиться к стилям в файле SVG, если он вставлен через <img/>. Иначе мы бы просто обращались к нужным элементам в SVG через наш основной CSS.

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

syno Feb 19 2016 at 02:36

Я для SVG использую такой JQuery код:

/*
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

Он автоматом заменит все

<img class="name">

на

<svg>

, которые можно видоизменить через css и класс .name

oshibka404 Feb 19 2016 at 03:54

А картинки так не будут дважды с сервера запрашиваться? Один раз — как src тега img, второй — через $.get.
И если одна картинка на странице встречается 10 раз, то 10 одинаковых запросов на сервер уйдёт?

Paul_King Feb 19 2016 at 07:47

Да, нам тоже так пришлось делать в свое время. И это решение нам очень не нравилось из-за своей грузности (было заметро, что новые SVG-шки загружались секунды через 2-3 после загрузки страницы).

funnybanana Feb 19 2016 at 04:48

и не слово про

transition

хотя тоже самое появление элемента с opacity:0; до opacity 1; делает так же плавно как и animation или fadeIn()...

P.S что-то маловато frontend-хитростей…

Paul_King Feb 19 2016 at 09:39

Заставить элемент появляться плавно с помощью transition можно только меняя класс элемента JS-ом.
Если вы напишете что-то вроде

.block {
    transition: .3s ease all;
    opacity: 1;
}

блок появится без анимации. Он изначально будет непрозрачным.

exeto Feb 21 2016 at 13:22

Интересный вариант подключения SVG-иконок предложил Владимир Кузнецов.

MechanisM Feb 22 2016 at 00:15

Насчет декорирования ссылок, мне нравится как делают многие зарубежные новостные сайты.
На одном из таких сайтов я выдернул код для примера и выложил на codepen.
Ну согласитесь же, что некрасиво смотрится когда вот на картинках в примере видно как буква "у" сливается с линиями декорации.

Paul_King Mar 2 2016 at 11:52

Соглашусь, намного лучше.

3263927 Jan 17 2020 at 13:51

с SVG проблема в том, что стили для него удобно определять в общем CSS документе, а вставлять его в код неудобно. а если добавлять его как IMG то он не будет управляемым (не появится в DOM как набор свойств)
часто работаю с SVG и нашёл для себя такое решение:

https://github.com/svgdotjs/svgdom
https://github.com/iconic/SVGInjector

эти две библиотеки позволяют манипулировать SVG как обычным элементом.
svgdom делает это через JQuery (с этой библиотекой вы работаете с SVG как с обычными HTML элементами)
а SVGInjector открывает все ссылки img с классом inject-me и заменяет их на код из SVG. в инициализации выполнить:

var mySVGsToInject = document.querySelectorAll('img.inject-me');
  SVGInjector(mySVGsToInject);