Почему сайт http://skb.sfolt.ru/ показывается по умолчанию в режиме Стандарт, а http://milliommetr.ru/miko7
- в режиме совместимости? Как сделать так, чтобы у всех пользователей при переходе
на этот сайт стоял режим Стандарт? Если дело в доктайпах, проверила все страницы на
сайте, везде доктайп есть.
Ответы
Ответ 1
Используйте следующий тэг:
Если есть возможность, вместо edge указывайте конкретную версию IE. Например, 8 или 10.
Использовать edge следует с осторожностью, поскольку:
Веб-разработчикам рекомендуется
использовать этот режим только на
тестовых страницах. Возможны
непредсказуемые результаты при
рендеринге контента страницы в будущих
версиях Windows Internet Explorer.
Кроме того, если у пользователя режим совместимости включен по умолчанию, то этот
тэг не сработает. Нужно будет использовать особые заголовки.
с помощью php
или с помощью .htaccess (используется в HTML5 Boilerplate)
Header set X-UA-Compatible "IE=Edge,chrome=1"
# mod_headers can't match by content-type, but we don't want to send this header
on *everything*...
Header unset X-UA-Compatible
Вопрос: Почему IE может переходить в "режим совместимости" на моем сайте?
Ответ:
На это есть несколько причин
ранее при просмотре сайта была нажата кнопка "просмотр в режиме совместимости";
переключение произошло автоматически из-за некоего контента, вызвавшего ошибку рендерера
IE и вынудившего его откатиться на старую версию рендерера;
режим совместимости был включен по умолчанию для всех сайтов;
IE посчитал сайт частью вашей интрасети и переключился в режим совместимости;
сайт попал в список Microsoft, как сайт, требующий включения режима совместимости;
Ответ 2
Вот подробная схема взаимодействия IE и режима документов: Determining IE9’s Document Mode
В opera 9.64 не подключается шрифт.
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'),
url(../fonts/37660512ac27f770b4231a4d31c0ae96.eot),
url(../fonts/37660512ac27f770b4231a4d31c0ae96.eot?#iefix) format('embedded-opentype'),
url(../fonts/37660512ac27f770b4231a4d31c0ae96.woff) format('woff'),
url(../fonts/37660512ac27f770b4231a4d31c0ae96.ttf) format('truetype'),
url(../fonts/37660512ac27f770b4231a4d31c0ae96.svg) format('svg');
}
Скорее всего из-за того, что не поддерживается в ней CSS3 (@font-face).
В консоли никаких ошибок нет. Это как-то исправимо?
Ответы
Ответ 1
Действительно, в Opera 9.64 согласно официальной документации движка Presto еще не
реализована поддержка CSS font-face, она появляется с версии Presto 2.2 а это Opera
10.0/Opera Mobile 9.7 И то, судя по отзывам она ужасно глючит в 10-11 версиях.
Правда если это как-то поможет, частично поддерживается font-face для svg, то есть
Вы можете попробовать загрузить svg-шрифт для текста внутри svg. На этом решения которые
мне удалось найти, заканчиваются.
Если у мсье много свободного времени и любви к искусству, он может детектить версию
браузера и при виде старой оперы показывать версию с контентом засунутым внутрь svg.
Главное детям это не показывайте.
Ответ 2
@font-face доступен в ранних версиях CSS. Попробуйте указать абсолютный путь для
подключаемых шрифтов. Также есть мнение, что Opera отказывается подключать шрифты когда
имя пользователя Windows написано кириллицей.
Задача: сделать на сайте так, чтобы графический файл автоматически отправлялся на
принтер. Сама печать легко запускается через window.print(), но при этом распечатанный
результат получается разного размера из разных браузеров: из IE печатается, как и задумано,
на весь лист А4, из Firefox картинка занимает меньше четверти листа, из Opera и Chrome
— нечто среднее. Пробовал устанавливать размер картинки через CSS, указывая в качестве
единицы измерения дюймы (in) — не помогает.
Как сделать, чтобы рисунок печатался на полный лист из любого браузера?
UPD: Решил проблему, установив для рисунка width:100% через css media=print
Ответы
Ответ 1
Браузеры практически не дают управлять параметрами печати.
Для Опреы и Хрома можно указать отступы в CSS:
@media print{
@page: {margin: 0%}
}
Остальные браузеры это игнорируют, подставляют значения, указываемые пользователем
(или по дефолту). То же касается колонтитулов - полностью пользовательская настройка.
А так печать картинки при выставленных одинаковых параметрах отступов, колонтитулов
и галки "по ширине страницы" печатается одинаково.
Устанавливайте картинке width:100% в правилах для @media print, дальнейшее будет
зависеть от пользователя.
Ответ 2
Вариант 1: переопределить css картинки через @media print{}.
Вариант 2: перед печатью установить нужные настройки печати. Но этим будет заниматься
пользователь - все-таки, принтер его.
Ответ 3
Специально для вас подумал и вот что придумал:
function atoprint(src) {
var atext = '';
var captext = window.document.title;
var alink = window.document.location;
var prwin = open('');
//prwin.document.open();
prwin.document.writeln(htmls.text3);
prwin.document.writeln('
Страница материала: '+alink+'<\/div>');
prwin.document.writeln('<\/div><\/body><\/html>');
prwin.print();
prwin.close;
};
передаете только src ну и в разметке что у меня есть тоже можете что нибудь поправить!
Хочу узнать, какие теги поддерживаются в старых браузерах. Например, взять теги small,
big bgsound и другие. Хочу узнать с какой версии браузеров они начинают поддерживаться
(mozilla, ie, chrome, safari, opera)? Есть ли где-нибудь официальная информация? Или
даже если не официальная, но та, которая соответствует действительности, может сервис
какой? Т.к. в интернете на разных сайтах информация разнится касаемо поддержки в разных
версиях браузеров
Ответы
Ответ 1
Проверяю на сайте webref.ru. Нужно ввести тег/элемент синтаксиса CSS в соответствующую
форму, и не требуется дополнительно жать на Enter.
Материалы сайта написаны квалифицированными профессионалами. Главный редактор — «веб-разработчик,
автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.»
Русский язык.
Частые обновления информации. На страницах указывается дата обновлений.
Указывается статус в спецификациях:
А если тег в них не входит, как в Вашем случае с , приводится следующее
сообщение:
Дополнительная информация о тегах/элементах синтаксиса CSS.
Если что-то осталось неясным, возможность оставлять комментарии, на которые есть
шанс получить квалифицированный ответ.
Если Вы верстаете сайты в Sublime Text, для ускорения работы можно воспользоваться
плагином FindDoc. Выделяете необходимый элемент синтаксиса HTML/CSS → нажимаете заданное
сочетание → получаете результат в браузере.
Необходимо настроить плагин на Webref. Preferences → Key Bindings → в правую pane
вставляете следующий код:
// FindDoc Webref
{
"keys": ["ctrl+alt+keypad9"],
"command": "find_doc_selection",
"args" : {"url" : "https://webref.ru/html/%s#field_html_browser"},
"context": [
{
"key": "selector",
"operand": "text.html.basic"
}
]
},
// FindDoc Webref
{
"keys": ["ctrl+alt+keypad9"],
"command": "find_doc_selection",
"args" : {"url" : "https://webref.ru/css/%s#field_css_browser"},
"context": [
{
"key": "selector",
"operand": "source.css"
}
]
},
Параметры:
"keys" — ваш шорткат, выбираете произвольный, незанятый.
"command": "find_doc_selection" — запуск FindDoc.
url" : "https://webref.ru/html/%s#field_html_browser", — URL, который откроется в
браузере по умолчанию. %s — переменная, вместо неё подставится то, что мы выделили.
В примере было выделено text-align, значит, откроется https://webref.ru/css/text-align#field_css_browser.
Если предпочитаете Can I use, значение параметра URL будет следующим: http://caniuse.com/#search=%s.
"key": "selector" — аргумент означает, что команда будет работать только в файлах,
имеющих область видимости, назначенную в параметре "operand".
"operand": "source.css" — область видимости. text.html.basic для HTML и source.css.
Если мы запустим команду в HTML-файле, откроется ссылка, прописанная для HTML, в CSS-файле
ссылка для CSS.
Если мы нажмём Сtrl+Alt+Keypad9, например, в js-файле, то в браузере ничего не откроется,
поскольку аргументами мы ограничили действие команды find_doc_selection html и css
файлами. Однако по тому же образцу можно настроить для области видимости JavaScript
— source.js — открытие ссылки на JavaScript.ru или другом сайте.
Ответ 2
http://caniuse.com/ - вводите название тега/css фичи и смотрите
https://modernizr.com/ - позволяет силами JS в рантайме
определять поддержку элемента в текущем окружении
Ответ 3
Кроме всего прочего, никогда не помешает зайти на W3C - тех, кто занимается спецификацией
тегов непосредственно. Там всегда можно найти свежую информацию касательно новых и
старых тегов и их применения.
В частности, по вашему вопросу о bgsound они пишут следующее:
No, really. Don't use it.
И варианты альтернатив приводят, если таковые есть и необходимы.
На странице есть 2 виджета, они оформлены как независимые компоненты и делать общение
между ними напрямую не хочется. Я решил попробовать использовать механизм общения через
события. Но вот столкнулся с проблемой, что, например, строка длиной 1млн символов
не передалась по событию в edge (в details события просто ничего нет), в Мозилле же
все прекрасно.
События создаются через интерфейс CustomEvent:
var event = new CustomEvent(type, {
'detail': data
});
element.dispatchEvent(event);
Вопрос в том, какое количество данных мы можем безопасно передавать в detail события?
Безопасно имеется в виду так, чтобы данные в событии дошли до адресата.
Ответы
Ответ 1
Провёл довольно интересный опыт с событиями в EDGE.
Запустил тест в Microsoft Edge (v40.15055.0.0) с передачей в параметрах события строки
длинной в 1 600 000 символов и вот что получилось:
Строка передается полностью и без проблем. (Длиннее строку передавать не пробовал).
Вставить её в HTML элемент в EDGE полностью не получилось, опытным путём выяснил,
что максимум, на что способен этот чудо браузер на моём компе - это 1 342 177 символов,
при этом в консоль выводит всю строку без проблем.
В Chrome проблем с вставкой не возникло.
Пытался нагуглить инфу по странному поведению в EDGE, да не вышло.
Если у кого нибудь есть объяснения, делитесь :)
(function () {
if ( typeof window.CustomEvent === "function" ) return false;
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
window.addEventListener("stringTest", function(e) {
$('#rStringLength').html('receive string length:' + e.detail.trString.length);
document.getElementById('rString').innerHTML = 'receive string EDGE:' + e.detail.trString.substr(0,
1342177); // EDGE
$('#rStringChrome').html('receive string Chrome:' + e.detail.trString);
});
var tString = '';
for (var i = 0; i < 100000; i++) {
tString += '1';
}
tString += tString;
tString += tString;
tString += tString;
tString += tString;
$('#stringLength').html('test string length: ' + tString.length);
var myEvent = new CustomEvent("stringTest", {
detail: {
trString: tString
}
});
$('#tsButton').click(function() {
window.dispatchEvent(myEvent);
});
Так, как в разных браузерах, например, шрифты и отступы отображаются по-разному,
нужно для каждого браузера указывать отдельное Css правило.
На данный момент использую следуее:
// IE9+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
.div1
transform scaleX(.7)
// Firefox
_:-moz-tree-row(hover), .div1
transform scaleX(1)
//chrome
.selector:not(*:root), .div1
transform scaleX(.4)
Есть ли лучший, более эффективный и компактный способ для этого? Есть ли еще специальные
подобные правила, кроме этих трех, для других браузеров?
Ответы
Ответ 1
Отдельные файлы для каждого браузера и их подключение через JavaScript
Я бы сделал отдельный css-файл для каждого браузера, затем с помощью JavaScript определял
браузер клиента, затем с помощью JavaScript подключал соответствующий файл (по сути
создаём тэг link).
Если правил не так и много, то можно с помощью JavaScript создать тэг style и его
контент (предварительно определив браузер клиента).
Чистый CSS: условные стили для браузера (хаки)
Если не желаете связываться с JavaScript, есть интересное решение в рамках CSS на
англ SO.
Суть его в том, что вы указываете стили для каждого браузера инвидувиально через
вендорные префиксы, @media или @supports:
Под .selector подразумевается нужный вам селектор.
/* Chrome 28+ */
@supports (-webkit-appearance:none) { /* Нужные стили */ }
/* Firefox (любой) */
_:-moz-tree-row(hover), .selector { /* Нужные стили */ }
/* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Нужные стили */ }
/* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Нужные стили */ }
/* Также Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Нужные стили */
}
/* Internet Explorer 9+ */
_::selection, .selector { /* Нужные стили */ }
/* Safari 6.1+, Chrome для iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media {
/* Нужные стили */
}}
Ответ 2
А чем не вариант проверять браузер на стороне сервера, и подключать соответствующие
стили? Либо собирать ваш css файл исходя из этого, удаляя отдельные строки(если файл
собирается ДО генерирования страницы)/подключая отдельные .styl файлы(если файл собирается
ВО ВРЕМЯ генерирования страницы).
Немного занимаюсь в свободное время frontend-ом (по фану) – CSS3, JavaScript, HTML5,
адаптив (чтобы сайт "как игрушка" выглядел, перестраивался динамически под размеры
и повороты экрана).
Первым шагом я тестирую полученное на различных разрешениях в эмуляторе Google Chrome
с помощью "Device Toolbar".
Когда всё готово, долго и муторно проверяю результат по следующему списку:
Mac OS X:
Google Chrome
Safari 11
TorBrowser
Windows 7, запущенная на VirtualBox под Mac OS X:
Google Chrome
Mozilla Firefox
Opera 45
IE 11
Android 4:
Google Chrome
Android Browser
SimulatorApp 9, запущенный на Mac OS X:
iPhone 4|5|6
iPad 2|Pro|Retina
Интересует опыт профессиональных фронтендщиков:
Насколько оправдан мой список устройств и браузеров для проверки результатов? Вы
бы что-нибудь добавили? Что-нибудь выкинули?
Какой workflow у вас? Как проверяете свои наработки? Ведь это целое адище – протестировать
свой код в разных браузерах и ОС, отнимает много времени.
Ответы
Ответ 1
Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО,
подкреплённое набитыми шишками.
Шаг первый, подготовительный.
Определите аудиторию сайта, её технические возможности, цель и место посещения. Это
позволит примерно понять, в каких условиях люди заходят на сайт и что они от него ждут.
Немного примеров навскидку:
Места: из дома, на работе, в транспорте, на детской площадке, в туалете, свисая с
моста на страховке, под дождём на автобусной остановке, в зале ожидания в больнице
Устройства вывода: десктоп, ноутбук, планшет, телефон, старый телефон, консоль /
телевизор, проектор, слуховой или тактильный аппарат
Устройства ввода: мышь, тачпад, сенсорный экран, мини-пульт, клавиатура, голос
Софт и настройки: навороченный браузер, упрощённый браузер, боковая панелька (Opera
<= 12.x, Vivaldi), фрейм в игре (EVE, например)
Обстоятельства: отдых (лениво почитывая или играя), работа (справка, переводчик),
активность (про мост и страховку - это не шутка), экстренные случаи, нарушения зрения
или координации
Поянтно, что одним сайтом покрыть все варианты невозможно и не нужно; многое зависит
от тематики и соотвутствующей целевой аудитории. Исходя из этого можно оценить, какие
фичи нужны, а чем можно пренебречь, чтобы облегчить разработку.
Шаг второй, аналитический.
Всё программирование - это поиск золотой середины между усилиями и результатом. Чем-то
в любом случае придётся жертвовать (в 2008-м я положил на алтарь свежие плюшки типа
jQuery ради нормальной работы в Opera Mini), и в связи с этим по возможности не надо
делать лишнего. Собственно, любая новая фича будет требовать поддержки на разных уровнях:
изображения, стили, разметка, скрипты, браузерные тесты.
Отсюда два вопроса:
Что требуется от дизайна?
Что от дизайна не требуется?
Постарайтесь максимально формализовать требования к сайту, чтобы их смог понять даже
компьютер. Таким требованием может быть "размер гамбургера от 20 до 40 пикселей" или
"всплывающее окошко не должно заслонять название элемента", а то и "расстояние от этой
ссылки до той кнопки должно уложиться в один свайп по тачпаду". Всё, что такими требованиями
не оговорено, будет считаться допустимой погрешностью - и с этим придётся смириться.
Шаг третий, кибернетический.
Автоматизируйте всё.
это целое адище – протестировать свой код в разных браузерах и ОС
Есть сервисы, которые позволяют проверять свои сайты на разных платформах, BrowserStack,
например. Все дополнительные фишки платные, но порой хватает и скриншота.
Если подходить более серьёзно - Selenium, есть и обвязки, позволяющие его встроить
в юнит-тесты для веб-приложения. Требования с прошлого этапа вполне реально перенести
на скрипт и регулярно его запускать. Более того, если есть возможность выделить отдельную
машину, Selenium может работать и удалённо, создавая пакеты "логов" на каждый чих.
При наличии автоматизации вопрос проверки в лишнем браузере теряет свою остроту.
Сравнение скриноштов позволит увидеть разницу; история изменений - changelog, а видимые
косяки перейдут в раздел требований и новых тестов.
Ответ 2
Я бы выкинул:
Tor browser
Этот браузер тоже самое что и firefox.
Проверять хром на Windows 7
Не вижу смысла, так как от маковского хрома он ничем не отличается, тогда уж лучше
проверять на xp так как там старая версия хрома - 49.
Я бы добавил
UC browser
Им еще пользуются все-таки лучше проверить
Opera mini
браузер с плохой поддержкой, если проект серьезный то лучше перенаправлять на так
называемую страницу badbrowser
FireFox для мобилы
Различий вроде не должно быть, но лучше проверить.
Edge
Новый браузер от microsoft есть небольшие (или большие) отличия от IE. работает только
под windows 8.1 и более
Поддержку некоторых вещей можно посмотреть здесь: https://caniuse.com
Наткнулся на интересную штуку - шрифт, в котором вместо иконки ты пишешь слово, а
оно показывается как иконка. Не знаю, как сделано именно тут, но единственный известный
мне способ сделать такое - это лигатуры в шрифте.
Меня интересует кроссбраузерность этого подхода.
.material-icons.material-icons {
font-size: 10rem;
}
home
Ответы
Ответ 1
Короткий ответ:
Сделано это с помощью подключения символьного шрифта от Google
Краткая аннотация от Google:
Шрифт обеспечивает читаемость и четкость символов, как больших, так и малых размеров.
Эти иконки оптимизированы для красивого отображения на всех распространенных платформах
и разрешениях дисплея.
Поддерживается всеми современными браузерами. Поддержка IE,
начинается с IE10.
Таблица поддержки символьных шрифтов браузерами.
Более подробно:
Всё началось в 2012 году.
Разработчики github.com решили повысить производительность своего сервиса и заменить
множество различных иконочных шрифтов одним своим стандартным Octicons, который отвечал
бы всем их потребностям в отображении иконок.
Скачать шрифт можно здесь
В марте 2013 года портал alistapart выпускает свою аналитическую статью -
The Era of Symbol Fonts
В которой автор рассказывает о преимуществах и некоторых недостатка применения символьных
шрифтов.
Автор статьи пишет, что шрифт, как векторное изображение поддерживается всеми браузерами
вплоть до IE6.
Я перевел заключительную часть статьи, заранее извиняюсь за вольный перевод
Проблемы с шрифтами
Любой хороший дизайнер скажет вам, что значок или логотип будут иметь тонкие различия
дизайна для разных размеров шрифтов, таких как, изменение толщины линии или даже уменьшение
некоторых деталей при небольших размерах.
Однако с символьными шрифтами вы не можете создавать альтернативные варианты для
разных размеров шрифта.
Если вам нужны разные рисунки при изменении размера шрифта то, вам необходимо дублировать
иконку в файле шрифта и выбрать соответствующий глиф в зависимости от использования.
Это тоже проблематично, потому что вы не представляете, как конечный пользователь
действительно просмотрит ваш дизайн. Увеличение размера шрифта в их браузере изначально
не приведет к изменению дизайна символа.
Для большинства из нас это не проблема, так как многие иконки, которые мы используем
сегодня для фидов и социальных сетей, относительно хорошо знакомы нам.
Другая важная проблема с использованием символьного шрифта заключается в том, что
вы получаете только один цвет. Вы можете использовать магию с цветами фона и градиентами
шрифта для эмуляции двухцветного логотипа, но если ваши иконки многоцветны, то текущая
настройка шрифта символов не будет работать для вас.
Чтобы исправить это, Apple предлагает многоцветные шрифты, которые позволят вам создавать
и вставлять чистую векторную графику на любую веб-страницу.
Первой попыткой в этой области является шрифт Apple Color Emoji, который вы, возможно,
уже имеете, если на вашем компьютере работает OSX Lion
Google Material Icons
Google воплотил идеи символьного шрифта в реальность и создал свой символьный шрифт
svg иконок, который включает в себя 900 изображений.
Подключение шрифта:
Выбирать иконки по названиям можно здесь (см. Update)
Пример использования гугловского символьного шрифта:
Наведите курсор на иконки
i {
margin: 100px 50px 50px 80px;
transition: transform 1s ease-in-out;
}
i:hover {
transform: scale(10);
}
.red{color:red}
.green{color:yellowgreen}
.blue{color: dodgerblue}
settingsandroidstars
Проверена работоспособность FF, Chrome, Opera, IE11.
К сожалению не имею возможности проверить работоспособность на более старых версиях
IE и Safari
Update 27.01.2018
Для иконок символьного шрифта с названиями в несколько слов, например
note add необходимо отдельные слова соединять нижним подчеркиванием note_add
Также имеется возможность поддерживать IE более старых версий: IE9 и
ниже.
Для этого в таблице шрифтов выберите нужную иконку и нажмите ICON FONT и заберите
образец вставки:
Ниже комбинированный пример для современных браузеров и для старых версий IE
i {
margin: 100px 50px 50px 80px;
transition: transform 1s ease-in-out;
}
i:hover {
transform: scale(10);
}
.red{color:red;}
.green{color:yellowgreen;}
.blue{color: dodgerblue;}
.grey{color: grey;}
note_addoffline_pinspeaker_notes
Связанный пример:
Нарисовать галочку средствами CSS
Что если html-верстку сайта сделать только с svg изображениями, вместо стандартных img или png, не будет никаких проблем? Кроссбраузерность и прочее?
Ответы
Ответ 1
Для SVG нужно указывать viewBox аттрибут, если вы хотите поведение svg, как картинки
Иначе svg не будет масштабироваться. Насколько это является проблемой - вам решать. В остальном - современные браузеры поддерживают svg давно, можно не париться.
Вторая проблема - svg труднее сделать, чем png. Художники/дизайнеры как правило работаю
с растровой графикой: векторный svg скорее является в web полезным дополнением, нежели новым подходом.
Например под векторную графику был заточен Flash, но он сейчас не живой.
Ответ 2
Можно ли весь сайт делать на svg?
Ответ - нет.
Так как вопрос поставлен слишком широко.
Если бы автор спросил,- можно-ли сделать всю оформительскую графику, анимацию, интерактивную картографию на SVG?, то ответ был-бы - ДА!
Так как формат SVG именно для этого и разработан.
Графика на сайте должна быть векторной, а не растровой.
Не хочется повторять избитые истины на тему,- что вектор легче по весу, а значи
сайты летают быстрее. Вектор масштабируемый по определению, поэтому не надо особых ухищрений, чтобы сайт одинаково великолепно смотрелся, как на маленьких экранах смартфонов, так и на гигантских видеопанелях.
23 сентября 2019 года вышла официальная версия Scalable Vector Graphics SVG2
Возможности SVG при этом значительно расширяются. В частности, появился новый элемент Mesh gradients
Конические градиенты
Отдельный разговор про анимацию SVG SMIL.
Вот уже четыре года Chrome пишет, что smil "deprecated",- в переводе означает, что он не одобряет smil, но тем не менее продлевает каждый раз его поддержку.
Смотрите, это уже идет с 45 версии до 78 текущей версии Chrome и продлено уже сейчас
как минимум до 77 update 81 будущей версии. Как говорится ничего нет более постоянного,чем временное.
Почему это происходит, почему не закрывают smil и не закроют в ближайшее время?
Потому-что основные конкуренты: CSS Animations Level 1, Web Animations не дотягивают до уровня smil SVG.
Все виды, любой сложной CSS анимации с простынями кода, легко и просто реализуютс
в несколько строк на SVG. Но наоборот, просто невозможно перевести некоторые примеры анимации SVG в CSS.
Например: движение по криволинейному пути текста, объектов, маркеров.
Ещё пример
Анимация ссылок с помощью кривых Безье
анимация начинается при наведении курсора на ссылку
SVG и CSS очень хорошо дополняют друг друга. CSS включил в свои
правила атрибуты и параметры SVG.
Например: для окраски строк, заполнение цветом элементов svg, в css добавлено stroke:#, fill:#
Перечень всех атрибутов, которые можно использовать и в SVG и в CSS
Update 20.10.2018
Ссылка на сайт, сделанный полностью на SVG:
Ответ 3
Если сайт предназначен не для чтения, а это веб приложение, например для рисования или игра, то на мой взгляд его НУЖНО делать как минимум при помощи SVG.
Еще есть CANVAS он приходит на помощь когда SVG начинает медленно работать из-з
того, что это все-таки DOM элементы, или когда возможностей SVG недостаточно (3D графика).
Перимущества SVG:
Все то что вытекает из того что SVG векторный формат с довольно несложным синтаксисом, те позволяет легко создавать элементы "сложной формы".
Простота взаимодействия - за счет поддержки DOM событий, поддержка CSS, все как с HTML элементами.
Богатейшие встроенные возможности работы с фильтрами, масками, анимациями.
Недостатки SVG:
Все-таки это DOM структура, и если она большая, то скорость рендеринга может упасть.
Разная поддержка спецификации в разных браузерах/устройствах.
Сложновато, по сравнению с HTML верстать обычный текст, однако никто не запрещает использовать для этого обычный же HTML
Пример, редактор сплайнов и симметрия, смотрите развернутым:
let size = 800;
let color = d3.scaleLinear(d3.schemeCategory10)
var points = d3.range(0, 5).map(function(i) {
return [
size/2 - Math.sin(i/3)*100*Math.random(),
size/2 + i*(33+33*Math.random())];
});
let dragged = null,
selected = points[points.length-1];
let line = d3.line().curve(d3.curveCardinal);
let svg = d3.select("svg")
.attr("width", size)
.attr("height", size);
svg.append("rect")
.attr("width", size)
.attr("height", size)
.on("mousedown", mousedown);
let copies = svg.append("g");
let path = svg.append("path")
.style("stroke", 'red')
.datum(points)
.classed("line", true);
d3.select(window)
.on("mousemove", mousemove)
.on("mouseup", mouseup);
fillCopies();
redraw();
d3.select('#axes').on('input', redraw)
function fillCopies() {
copies.html('');
let axes = d3.select('#axes').node().value;
for (let i = 0; i < axes; i++) {
let transformValue = `
translate(${size/2} ${size/2})
rotate(${i*(360/axes)})
translate(${-size/2} ${-size/2})
`;
axes-1&&copies.append("line")
.attr('x1', -size)
.attr('y1', size/2)
.attr('x2', size/2)
.attr('y2', size/2)
.attr('transform', transformValue)
i && copies.append("path")
.style('stroke', color(i/axes))
.attr('transform', transformValue)
.datum(points)
.classed("line", true)
}
}
function redraw() {
fillCopies();
svg.selectAll("path").attr("d", line);
var circle = svg.selectAll("circle.knob")
.data(points, d => d);
circle.exit()
.remove();
let newNodes = circle.enter()
.append("circle")
.classed('knob', true)
.attr("r", 1e-6)
.on("mousedown", d => {
selected = dragged = d;
redraw();
})
.transition()
.duration(250)
.attr("r", 6.5);
circle.merge(newNodes)
.classed("selected", d => d === selected)
.attr("cx", d => d[0])
.attr("cy", d => d[1]);
if (d3.event) {
d3.event.preventDefault();
d3.event.stopPropagation();
}
}
function mousedown() {
points.push(selected = dragged = d3.mouse(svg.node()));
redraw();
}
function mousemove() {
if (!dragged)
return;
let m = d3.mouse(svg.node());
dragged[0] = Math.max(0, Math.min(size, m[0]));
dragged[1] = Math.max(0, Math.min(size, m[1]));
redraw();
}
function mouseup() {
if (!dragged)
return;
mousemove();
dragged = null;
}
body {
margin: 0;
}
rect {
fill: none;
pointer-events: all;
}
line {
stroke: gray;
stroke-dasharray: 5 10;
}
circle,
.line {
fill: none;
stroke: red;
stroke-width: 1.5px;
}
circle {
fill: #fff;
fill-opacity: .2;
cursor: move;
}
.selected {
fill: #ff7f0e;
stroke: #ff7f0e;
}
.ui {
padding: 5px;
padding-top: 10px;
box-shadow: 0 1px 1px 0 lightgray;
}
Приемущества CANVAS:
Наличие 2D и 3D контекста.
Практически безграничные возможности графического программирования, тут все зависит от Вас, будет это работать быстро или нет.
Возможность утилизировать мощность видеокарты, причем не только для графики, но и для расчетов.
Вы сможете открыть для себя нечто новое в (веб) программировании =)
Недостатки CANVAS:
Относительно сложный(2D) и очень сложный(3D) API. (Высокий порог вхождения)
Отсутствие механизмов взаимодействия с элементами, т.е. Вам самим надо проверят
где пользователь возит мышкой и самим реагировать на это.
Сложность отладки. (Ничего вы не посмотрите в инспекторе итд)
Пример: 3D фрактал - Губка Менгера, получен при помощи трассировки лучей во фрагментном шейдере.
В примере реализованы:
освещение/затенение по фонгу подвижным источником света
мягкие тени
ambient occlusion
управление:
drag = rotate
scroll = zoom
let fragCode = [...document.scripts].find(s => s.type === "frag").textContent;
let fst = FullScreenTriangle(fragCode);
let resolution = fst.triangleProgram.uniform('2f', 'resolution');
let time = fst.triangleProgram.uniform('1f', 'time');
let eye = fst.triangleProgram.uniform('3f', 'eye');
let lightPos = fst.triangleProgram.uniform('3f', 'lightPos');
let started = new Date().getTime();
Mouse3D.init();
animate();
function animate() {
requestAnimationFrame(animate);
drawFrame();
}
function drawFrame() {
let t = (new Date().getTime() - started)/1000;
resolution.set(fst.gl.drawingBufferWidth, fst.gl.drawingBufferHeight);
time.set(t);
eye.set(Mouse3D.eye[0], Mouse3D.eye[1], Mouse3D.eye[2]);
lightPos.set(Math.cos(t/3)*0.8,0,Math.sin(t/3)*0.8);
fst.draw();
}
body {
margin: 0;
overflow: hidden
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
Есть такого рода код: $(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('Привет');
});
Прекрасно работает на десктопе. Но почему-то не работает в мобильной версии.
Из мобилок у меня только iPhone 5C, так что девайсов на тест не велико, но и в режиме имитатции мобилок в Хроме, код тоже не хочет выполняться.
Есть неколхозный и без костылей вариант кросбраузерно отслеживать конец страницы по скроллу?
Ответ
Попробуйте такой вариант с использованием кросс-браузерной функции определения высоты документа от James Padolsey
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("Конец страницы");
}
});
});
#container {
height: 1000px;
width: 100px;
background-color: red;
}
Задача: сделать на сайте так, чтобы графический файл автоматически отправлялся на принтер. Сама печать легко запускается через window.print(), но при этом распечатанный результат получается разного размера из разных браузеров: из IE печатается, как и задумано, на весь лист А4, из Firefox картинка занимает меньше четверти листа, из Opera и Chrome — нечто среднее. Пробовал устанавливать размер картинки через CSS, указывая в качестве единицы измерения дюймы (in) — не помогает.
Как сделать, чтобы рисунок печатался на полный лист из любого браузера?
UPD: Решил проблему, установив для рисунка width:100% через css media=print
Ответ
Браузеры практически не дают управлять параметрами печати.
Для Опреы и Хрома можно указать отступы в CSS:
@media print{
@page: {margin: 0%}
}
Остальные браузеры это игнорируют, подставляют значения, указываемые пользователем (или по дефолту). То же касается колонтитулов - полностью пользовательская настройка.
А так печать картинки при выставленных одинаковых параметрах отступов, колонтитулов и галки "по ширине страницы" печатается одинаково.
Устанавливайте картинке width:100% в правилах для @media print, дальнейшее будет зависеть от пользователя.
Так, как в разных браузерах, например, шрифты и отступы отображаются по-разному, нужно для каждого браузера указывать отдельное Css правило. На данный момент использую следуее: // IE9+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
.div1
transform scaleX(.7) // Firefox
_:-moz-tree-row(hover), .div1
transform scaleX(1) //chrome
.selector:not(*:root), .div1
transform scaleX(.4)
Есть ли лучший, более эффективный и компактный способ для этого? Есть ли еще специальные подобные правила, кроме этих трех, для других браузеров?
Ответ
Отдельные файлы для каждого браузера и их подключение через JavaScript Я бы сделал отдельный css-файл для каждого браузера, затем с помощью JavaScript определял браузер клиента, затем с помощью JavaScript подключал соответствующий файл (по сути создаём тэг link). Если правил не так и много, то можно с помощью JavaScript создать тэг style и его контент (предварительно определив браузер клиента). Чистый CSS: условные стили для браузера (хаки) Если не желаете связываться с JavaScript, есть интересное решение в рамках CSS на англ SO Суть его в том, что вы указываете стили для каждого браузера инвидувиально через вендорные префиксы, @media или @supports Под .selector подразумевается нужный вам селектор. /* Chrome 28+ */
@supports (-webkit-appearance:none) { /* Нужные стили */ } /* Firefox (любой) */
_:-moz-tree-row(hover), .selector { /* Нужные стили */ } /* Internet Explorer 11+ */
_:-ms-fullscreen, :root .selector { /* Нужные стили */ } /* Internet Explorer 10+ */
_:-ms-lang(x), .selector { /* Нужные стили */ } /* Также Internet Explorer 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Нужные стили */
} /* Internet Explorer 9+ */
_::selection, .selector { /* Нужные стили */ } /* Safari 6.1+, Chrome для iOS */
@media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio: 0) { @media {
/* Нужные стили */
}}
Немного занимаюсь в свободное время frontend-ом (по фану) – CSS3, JavaScript, HTML5, адаптив (чтобы сайт "как игрушка" выглядел, перестраивался динамически под размеры и повороты экрана). Первым шагом я тестирую полученное на различных разрешениях в эмуляторе Google Chrome с помощью "Device Toolbar". Когда всё готово, долго и муторно проверяю результат по следующему списку:
Mac OS X:
Google Chrome
Safari 11
TorBrowser
Windows 7, запущенная на VirtualBox под Mac OS X:
Google Chrome
Mozilla Firefox
Opera 45
IE 11
Android 4:
Google Chrome
Android Browser
SimulatorApp 9, запущенный на Mac OS X:
iPhone 4|5|6
iPad 2|Pro|Retina
Интересует опыт профессиональных фронтендщиков:
Насколько оправдан мой список устройств и браузеров для проверки результатов? Вы бы что-нибудь добавили? Что-нибудь выкинули?
Какой workflow у вас? Как проверяете свои наработки? Ведь это целое адище – протестировать свой код в разных браузерах и ОС, отнимает много времени
Ответ
Дисклеймер: я не фронт-энд разработчик, лишь сочувствующий; все выкладки - ИМХО, подкреплённое набитыми шишками. Шаг первый, подготовительный. Определите аудиторию сайта, её технические возможности, цель и место посещения. Это позволит примерно понять, в каких условиях люди заходят на сайт и что они от него ждут. Немного примеров навскидку:
Места: из дома, на работе, в транспорте, на детской площадке, в туалете, свисая с моста на страховке, под дождём на автобусной остановке, в зале ожидания в больнице
Устройства вывода: десктоп, ноутбук, планшет, телефон, старый телефон, консоль / телевизор, проектор, слуховой или тактильный аппарат
Устройства ввода: мышь, тачпад, сенсорный экран, мини-пульт, клавиатура, голос
Софт и настройки: навороченный браузер, упрощённый браузер, боковая панелька (Opera <= 12.x, Vivaldi), фрейм в игре (EVE, например)
Обстоятельства: отдых (лениво почитывая или играя), работа (справка, переводчик), активность (про мост и страховку - это не шутка), экстренные случаи, нарушения зрения или координации
Поянтно, что одним сайтом покрыть все варианты невозможно и не нужно; многое зависит от тематики и соотвутствующей целевой аудитории. Исходя из этого можно оценить, какие фичи нужны, а чем можно пренебречь, чтобы облегчить разработку. Шаг второй, аналитический. Всё программирование - это поиск золотой середины между усилиями и результатом. Чем-то в любом случае придётся жертвовать (в 2008-м я положил на алтарь свежие плюшки типа jQuery ради нормальной работы в Opera Mini), и в связи с этим по возможности не надо делать лишнего. Собственно, любая новая фича будет требовать поддержки на разных уровнях: изображения, стили, разметка, скрипты, браузерные тесты. Отсюда два вопроса:
Что требуется от дизайна?
Что от дизайна не требуется?
Постарайтесь максимально формализовать требования к сайту, чтобы их смог понять даже компьютер. Таким требованием может быть "размер гамбургера от 20 до 40 пикселей" или "всплывающее окошко не должно заслонять название элемента", а то и "расстояние от этой ссылки до той кнопки должно уложиться в один свайп по тачпаду". Всё, что такими требованиями не оговорено, будет считаться допустимой погрешностью - и с этим придётся смириться. Шаг третий, кибернетический. Автоматизируйте всё.
это целое адище – протестировать свой код в разных браузерах и ОС
Есть сервисы, которые позволяют проверять свои сайты на разных платформах, BrowserStack, например. Все дополнительные фишки платные, но порой хватает и скриншота. Если подходить более серьёзно - Selenium, есть и обвязки, позволяющие его встроить в юнит-тесты для веб-приложения. Требования с прошлого этапа вполне реально перенести на скрипт и регулярно его запускать. Более того, если есть возможность выделить отдельную машину, Selenium может работать и удалённо, создавая пакеты "логов" на каждый чих. При наличии автоматизации вопрос проверки в лишнем браузере теряет свою остроту. Сравнение скриноштов позволит увидеть разницу; история изменений - changelog, а видимые косяки перейдут в раздел требований и новых тестов.
