Paul_King 18 фев 2016 в 15:49

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

4 мин

91K

Блог компании ex-WargamingCSS*HTML*

Туториал

+22

Комментарии 68

Yeah 18 фев 2016 в 16:44

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

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

GreatRash 18 фев 2016 в 16:52

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

Paul_King 18 фев 2016 в 17:27

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

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

ImKremen 18 фев 2016 в 18:09

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

Paul_King 18 фев 2016 в 18:24

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

Ohar 18 фев 2016 в 19:06

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

Paul_King 18 фев 2016 в 21:13

iframe — нет, object — да.

Finom 18 фев 2016 в 21:52

Почему?

Paul_King 19 фев 2016 в 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>

-1

GreatRash 19 фев 2016 в 10:09

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

Paul_King 19 фев 2016 в 10:15

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

Large 19 фев 2016 в 10:41

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

Paul_King 19 фев 2016 в 10:50

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

Large 19 фев 2016 в 11:03

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

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

Paul_King 19 фев 2016 в 11:13

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

Large 19 фев 2016 в 13:52

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

GreatRash 20 фев 2016 в 10:04

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

Large 20 фев 2016 в 13:08

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

i360u 19 фев 2016 в 11:14

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

dom1n1k 18 фев 2016 в 22:28

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

Fen1kz 18 фев 2016 в 17:15

HTML5 + CSS3

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

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

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

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

-7

Paul_King 18 фев 2016 в 17:36

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

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

Fen1kz 18 фев 2016 в 18:16

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

-7

Paul_King 18 фев 2016 в 18:39

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

Ohar 18 фев 2016 в 19:09

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

Fen1kz 18 фев 2016 в 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?

-2

ImKremen 18 фев 2016 в 19:31

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

Fen1kz 18 фев 2016 в 19:54

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

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

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

-3

Paul_King 19 фев 2016 в 10:13

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

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

Fen1kz 19 фев 2016 в 14:26

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

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

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

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

-1

Paul_King 19 фев 2016 в 14:47

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

-1

Fen1kz 19 фев 2016 в 14:57

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

-1

Balek 22 фев 2016 в 01:05

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

Paul_King 22 фев 2016 в 10:19

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

Ohar 18 фев 2016 в 19:48

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

Paul_King 18 фев 2016 в 21:42

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

SerafimArts 19 фев 2016 в 01:05

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

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

Paul_King 19 фев 2016 в 10:05

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

bolk 19 фев 2016 в 07:18

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

TNK 18 фев 2016 в 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 18 фев 2016 в 17:43

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

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

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

friday 18 фев 2016 в 17:57

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

Paul_King 18 фев 2016 в 18:01

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

Aux 19 фев 2016 в 02:17

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

Paul_King 19 фев 2016 в 09:52

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

indrauolles 18 фев 2016 в 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 18 фев 2016 в 18:34

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

-3

ImKremen 18 фев 2016 в 18:50

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

Paul_King 18 фев 2016 в 20:56

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

Aux 19 фев 2016 в 02:19

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

lifestyle 18 фев 2016 в 19:18

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

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

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

-2

Paul_King 18 фев 2016 в 21:17

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

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

Razunter 18 фев 2016 в 19:44

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

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

Paul_King 18 фев 2016 в 21:38

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

romy4 18 фев 2016 в 19:58

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

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

Paul_King 18 фев 2016 в 20:58

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

firya 19 фев 2016 в 12:17

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

lain8dono 19 фев 2016 в 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 19 фев 2016 в 07:42

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

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

syno 19 фев 2016 в 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 19 фев 2016 в 03:54

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

Paul_King 19 фев 2016 в 07:47

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

funnybanana 19 фев 2016 в 04:48

и не слово про

transition

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

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

-1

Paul_King 19 фев 2016 в 09:39

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

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

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

exeto 21 фев 2016 в 13:22

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

MechanisM 22 фев 2016 в 00:15

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

Paul_King 2 мар 2016 в 11:52

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

3263927 17 янв 2020 в 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);

Зарегистрируйтесь на Хабре, чтобы оставить комментарий