Great Rash

Не знаю почему, но сейчас например JS модно красить в желтый. А так идея отличная.

Я не пошел, потому что мне доклады были ну совсем неинтересны. Но если б я знал, что вы там будете... эх жаль, показал бы вам свою работу

Решение не подходит - http://jsfiddle.net/8mqwbrro/1/

У вас совершенно другой код в примере.

Что-то у вас там флекс внутри флекс внутри флекс. Оно вам точно так надо?

Не посчитали нужным очищать. Да и незачем особо.

http://codepen.io/GreatRash/pen/GJVrXX Правда не уверен, что будет работать как надо во всех браузерах (я тока в хроме проверял). И вместо градиента, я всё равно предлагаю картинку.

Читайте про свойство outline.

Картинку вырезать.

Вообще если это button. то разве там не должно всё автоматом по-центру выравниваться? Без паддингов.

table { table-layout: fixed; } td { overflow: hidden; /* или */ word-break: break-all; }

button::-moz-focus-inner { padding: 0; margin: 0;}есть в стилях?

Проблема в неверной кодировке документа как мне кажется.

Правда async не кроссбраузерный (если нужна поддержка старых ИЕ).

Ну так не надо его в середину документа пихать.

Для этого придумали коллбеки. Если нужны некие функции от сторонних сриптов прям сейчас, то запускаем интервал и спрашиваем window есть ли там нужная переменная, ежели есть юзаем коллбек в котором запускаем чо нам там надо.

Я даже заморочился. Если в оригинале картинка 2х2 пикселя, и все они чёрные, то и на выходе будет 2х2 пикселя и все они чёрные. У нас ничего кроме размера пикселя не меняется.

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

Почему же?

Ну как парсить... используя канвас можно получить данные о цвете пикселя в конкретном участке изображения. Для уменьшения веса мы всегда в URL кодируем изображение с размером пикселя 1: http://clip.corp.mail.ru/clip/m0/1439995006-clip-12kb-iwknci5JJTtL.png Потом грузим его в канвас, пробегаем все пиксели циклом и таким образом парсим. Например вот Марио в base64: iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAElBMVEX/AADKAAzEPQDz6AAOD/////8hbXKVAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAABVSURBVAjXFYzBDcAgDAMN7QCNxAAoWQDhDlBE9p+p5j73sQ8oZhAmHsBjDqBOTg4pGEQNTu/ARfIs1zkUW00Hs0wF2N69CL6ZW0qhaX53KubKdviR/1TEC+GCYWr4AAAAAElFTkSuQmCC344 символа, 344 байта.

Данные для картинки (сюрприз!) можно брать из самой картинки.

Так надо не JSON перегонять в base64, а получившуюся картинку.

Посмотреть очень просто: открываем например Хром, жмём F12, ищем закладку Network, перезагружаем страницу и смотрим какие запросы полетели и какие ответы пришли. В общем нет, что так. что сяк грузится одинаково, т.е. свой запрос на каждую картинку.