Кроссбраузерная вёрстка - HTML Шорты

- Логотипы всех браузеров - github.com/alr...)
- Зачем Опере Вебкит, Вадим Макеев - • Зачем Опере Вебкит )
- Голосование за фичи EdgeHTML - wpdev.uservoic...)
- Прокси-браузеры, Тим Кадлек - • Better By Proxy at Vel... )
- BrowserStack - www.browsersta...
- Виртуальные машины с Edge и IE - developer.micr...)
- Chrome DevTools Device Mode - developers.goo...)
- Должны ли сайты выглядеть одинаково во всех браузерах? - dowebsitesneedt...
Задавайте вопросы в комментариях к видео. На самые интересные мы ответим в следующих выпусках.
Бесплатные интерактивные курсы - htmlacademy.ru...
Ближайшие интенсивы - htmlacademy.ru...

[@HTMLAcademyTV]

По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87

[@СергейАртёмов-р5у]

«Сайты не должны выглядеть одинаково во всех браузерах» - главная мысль выпуска! Когда это до всех дойдёт?!

[@panicjan]

Боюсь, что никогда … :,(

[@artempolukarov6155]

Последний раз слышал про пиксел перфект года полтора назад, даже фриланс подопустило от это херни

[@WhiteBriar]

"Усложнять простое проще, чем упрощать сложное" -- це генiально!

[@СергейСафронов-в8т]

"Пиксель-перфект - это попасть в сетку и в горизонтальные размеры блоков, то у вас есть шанс" Это шедеврально !!!!

[@ЕленаПрекрасная-г1щ2р]

Вадим, ты крутой!

[@maxengio]

Бомбезный формат. Автор спасибо!

[@ВикторикаРодомакина]

Мало что поняла, но главную мысль вроде ухватила.Спасибо. Ведущий Огонь! :)))

[@ericraudy]

Очень толково!

[@sashakost6279]

Спасибо, Вадим! Всегда интересно и по делу!)

[@peryaful]

Блестяще!

[@clickabelno]

Лайк и подписка за детали и полезность

[@Олег-ч2л5р]

Прекрасный путеводитель, чудесная история очень интересно и здорово. Вадим , у меня, у новичка один единственный вопрос - почему люди имеющие кучу опыта в верстке и разработке , уделяют инструментам по устранению проблем в браузерах, 1 слово за весь выпуск а именно "префиксы" , я больше ни чего из этого видео полезного не вынес . Первый раз пишу комментарий такого тона , от непонимания соотношений опыта и конечного результата в виде баллад о движках. Вы говорите о пожеланиях в коменты , вот мои : -Рассказывайте нам новичкам о инструментах для решения проблем, а не о том о чем вы холиварите на элитных автопартях ("сайты не должны выглядеть одинаково" и бла бла бла - какая к черту разница если это в конечном счете всё равно индивидуально ), я рассчитывал открыть видео и увидеть на что сейчас актуально обратить внимание, с чем познакомиться , что научиться использовать а тут чудесная байка. -Расскажите нам новичкам про стандарты Js , я учу js что мне нужно знать о стандартах какой учить, что актуально чем отличается и т.д . Буду очень благодарен.

[@wrGraff1]

Олег, префиксы здесь как раз не самое важное. Нет смысла детально разбирать каждое свойство, в котором они встречаются (тем более, это гуглится на раз-два), да и не решат префиксы всех проблем - в этом и есть суть. Важнее здесь вынести не конкретный инструмент, а полную картину, понять что происходит, зачем и почему. И как нам с вами с этим жить и справляться, чтобы однажды не сойти с ума. Кстати, конкретные инструкции и курсы есть на сайте Академии.

[@Олег-ч2л5р]

Полностью с вами согласен , префиксы не решают всех проблем , но какое то количество -да. Байка про движки же не решает ни каких проблем , кроме необходимости счастья от написании байки про движки. Полная картина же заключена в самом термине "Кроссбраузерность" , картина понятна а вот как раз как нам с этим жить не понятно из ролика , и уж тем более как с этим справится. Я просто оставил пожелание , не утверждая к слову что префиксы самое главное =) , согласитесь очень странно наблюдать информацию о конкретных инструментах , во втором эшелоне комментариев , а не одной из ссылок в описании , рядом с тулзами для предпросмотра (которые по словам автора не отражают реальности), холиварами и прочими чудесными заметками.

[@pepelsbey]

Олег, эти видео не заменяют учебный курс. У нас для этого есть интенсивы - htmlacademy.ru/intensive Мы здесь стараемся очень точечно ответить на частые или просто важные вопросы, которые нам задают. Мы, безусловно, сами выбираем на какие отвечать - такие, которые считаем достаточно интересными.

[@Олег-ч2л5р]

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

[@pepelsbey]

Олег Иванович можно ведь и про префиксы выпуск записать ;)

[@AlexAlex-sh3mz]

смотрю на замедленном воспроизведении капец, обычно наоборот бывает)

[@ОляПереверзева-я8р]

Жаль, что закрыли эту рубрику

[@aleksversus]

Моё мнение таково: сайты не должны выглядеть одинаково в разных браузерах, но обязаны быть компактными лёгкими и удобными во всех браузерах. И жрать как можно меньше трафика. Вот например сейчас я в Opere сохранил вот эту самую страницу youtube, и она весит 2 с лишним мегабайта (не считая картиночек)!!! Если бы я до сих пор сидел на EDGE (2G), эта страница грузилась бы таааааааак долго.

[@ekaterinakrutakova9781]

«Сайты не должны выглядеть одинаково во всех браузерах» - только, как мне помнится, пиксель-перфект в критериях в академии :)

[@HTMLAcademyTV]

У нас есть критерий про соответствие макету с достаточно большими допусками (5px по вертикали и 2px по горизонтали внутри блока). Это очень далеко от пиксельпёрфекта.

[@the2x548]

Ты где пропал?

[@ramilmamedov481]

Расскажите пожалуйста об conditional comments вроде:

[@sarlevdiz]

Вадим, а можешь рассказать про организацию html и css? Например, большинство верстальщиков обнуляют стили в своих css файлах, затем пишут правила для заголовков, дальше хедер, футер и т.д. Разбиваешь ли ты файлы стилей (думаю, да). Можешь рассказать об этом подробнее?

[@artempolukarov6155]

Расскажи про will-change в каких случаях его лучше использовать, и про оптимизацию как таковую.

[@alexstanix1026]

А что насчет разных разрешений экранов в мониторах одного размера? Не могу найти информацию про это. К примеру 100 пикселей же будут визуально меньше на fullhd в сравнении со ста пикселями на hd экране, если размеры мониторов одинаковые. Это в верстке как-то учитывается?

[@maxsimusprime7282]

Вадим, расскажите в каких относительных размерах задавать padding: в % или rem? а margin? Что лучше для резиновости? (вопрос стоит только в рамках % и rem)

[@rtnjo6936]

лоооол, вы так похожи на Ходорковского)

[@blinkapec]

О***нное видео! Спасибо вам!

[@enotnt]

Спасибо теска)))

[@sergey7165]

Крутая программа, но уже прошёл месяц, а новых выпусков нет. Вы случайно не забросили идею про рассказывание сложных и важных вещей подробно, коротко и внятно?

[@HTMLAcademyTV]

Не забросили, обновляли кое-чего.

[@seryozhamangushev9638]

Макеев, подскажи или объясни. В каком плане = bem - это не просто договоренности? Bem помогает создавать страницу адаптивной без media запросов, как это?

[@ЭрикШеляг-м7й]

ВОПРОС. Стоит ли пытаться угодить всем? Например есть ли смысл адаптировать сайт под какие-нибудь неизвестные китайские телефоны со встроенными в них неизвестными китайскими браузерами? И где эта черта? Что обязательно на ваш взгляд, а что опционально?

[@sergeykanyukov7758]

Добрый день!Расскажите о future detection в верстке.

[@ivan4486]

Так я не понял - когда в требованиях к вакансии говорят что надо уметь "кроссбраузерную верстку", что конкретно я должен уметь?

[@HTMLAcademyTV]

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

[@almazmusic]

Ребят, куда пропали шорты?

[@HTMLAcademyTV]

Не пропали, пока в отпуске. Ждём потепления - будут шорты!

[@antonsha2027]

А мне казалось что движок вебкит у всех браузеров. А сейчас обязательно прописывать префексы ? А как проверить сайт если нет устройства apple

[@StyledJavaScript]

Вадим сразу два способа предложил, или на устройстве пальцем, или сервисы вроде BrowserStack.

[@ReiDBAss]

Могли бы вы ответить на один вопрос. Почему в Explorer список не анимирован а на остальных браузерах робота идет как надо ?

[@dondragon6949]

дойдет что html... должен быть везде одинаково) а привычки....пофигу) А то жопа будет полная!!!!

[@antonkarpov109]

Эх! Стоило бы про автопрефиксеры упомянуть.

[@НикитаНовоселов-ю6у]

Шортов больше не завезут?

[@HTMLAcademyTV]

Завезут второй сезон, нужно немного подождать. Уже почти нужная температура.

[@misharodshtein]

С каждым разом паузы между репликами всё заметнее (

[@ЭрикШеляг-м7й]

ВОПРОС. Почему Firefox так плохо поддерживает 3D анимации (WebGl и в частности ThreeJS) почему падает FPS и как с этим бороться?

[@Tony_99999]

Вадим, напомните пожалуйста где вы покупаете футболки =)

[@artemeesenin9552]

Вот на сайте академии, когда проходишь курсы, футер на мониторе 4к висит над нижней границей экрана. Нужно ли что-то делать с такими ситуациями, например, устанавливать min-height: 100vh (или calc(100vh - футер и хедер)) для контента или и так сойдет?

[@HTMLAcademyTV]

Тут всё зависит от дизайна и содержания страницы. Когда содержание текстовое и его много, таких проблем не возникает. Но если интерфейс более сложный, как в наших курсах, то резиновость по высоте будет не лишней. Мы добавили такую резиновость в обновлённом интерфейсе курсов, который сейчас используется в курсах по JS. Можете сами посмотреть, как он себя ведёт. Правда, там у резиновой высоты есть минимальные и максимальные значения.

[@artemeesenin9552]

Огромное спасибо за ответ! :)

[@nikbelikov]

Я скинул, конечно же, это видео тестировщикам и некоторым заказчикам, но, думаю, им нет дела до всего этого - надо, чтобы было красиво везде. Ты сверстать это, что ли, не можешь? Пф...

[@egorindeed]

Как правильно добавлять изображения на сайт? С помощью img или с помощью свойства background для div'a, например?

[@ruslanshikhaliev9341]

Через img ,если это контент и bg ,если это декорация. (в большинстве случаев так).

[@WebSP-q7e]

Вадим, мы с другом начали спорить, о том какой из селекторов быстрее для браузера. Друг утверждает, что селекторы типа: ".nav-list .nav-item a", быстрее чем "nav__link", т.е селектор из трёх элементов против одиночного селектора, какой из них будет быстрее?

[@mdevils1]

В силу специфики работы CSS-движка селектор ".nav__link" гораздо быстрее селектора ".nav-list .nav-item a". В случае селектора ".nav__link" браузер обратиться к индексу по классам, который он заблаговременно выстроил и извлечет оттуда напрямую все элементы, которые соответствуют этому CSS-классу без обращения к DOM-дереву. В случае селектора ".nav-list .nav-item a" браузер сначала соберет все элементы "A", а потом будет фильтровать их по признаку наличия одного из родительских элементов с классом ".nav-item", а потом оставшиеся будет фильтровать по признаку наличия у соответственных ".nav-item" одного из родителей с классом ".nav-list".

[@ЭрикШеляг-м7й]

ВОПРОС. Как правильно тестировать сайт на предмет кроссплатформенности? неужели нужно покупать все модели телефонов и планшетов?

[@SK-lx1zd]

Есть эмуляторы. С помощью них и тестить.

[@sevasdreas]

Футболка уже была!

[@ВладимирЕфанов-з2ж]

Так ты раскроешь секрет, где ты берешь эти майки ?

[@ihabia]

Всем привет! Вопрос на засыпку ) Мне пока, что никто толком не сказал ответа. Есть множество сайтов, где ссылки сделаны с эффектом transition. Я специально сделал пустую страницу, где всего лишь одна ссылка с эффектом transition, вот она: ambientfeel.com/test2/index.html , если обновлять страницу (CTRL+F5) либо открывать в новой вкладке, то можно увидеть мерцание - переход от синего цвета до заданного мною цвета в стилях, белого. Это наблюдается только в хроме. Я задавал вопрос владельцам сайтов, у которых есть в меню допустим транзишоны у ссылок, но никакого мерцания нет, и самое интересное, что они сами не могли понять, почему его нет у них на сайте, хотя сделано всё тоже самое, ссылка с эффектом transition. В интернете очень мало инфы про этот баг, но мне больше интересно, неужели люди делают сайты и непроизвольно, непонятным для себя образом решают эту проблему. У кого какие догадки? )

[@verniedannie1519]

Самый нормальный браузер Netscape до сих пор пользуюсь

[@d3i0]

На слух плохо ложиться инфа....

[@HTMLAcademyTV]

Есть текстовая версия - htmlacademy.ru/shorts/21

[@ЭрикШеляг-м7й]

ВОПРОС. как тестировать сайт на Сафари если нет макбука?

[@doszh9899]

Скачай вм и установи мак ос. Или торрентах есть уже установленными мак ОС с виртуальной машинами.

[@Storkz0re]

Вот откуда новые баги в хроме на айфонах.

[@ivanivan1558]

У фанатов CSS3 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно одинаково на всех браузерах". dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

[@АртемВолков-ю5ь]

Вадим, как победить Google PageSpeed Tools на 100/100

[@helios161]

BrowserStack - самый бесполезный инструмент для тестирования iOS. Сколько раз уже было - тестировщики проверяют сайт в BrowserStack под какой-нить ретина Ipad и рапортуют об обнаруженном баге. Часто это касается поворота устройства - содержимое не перестраивается на всю ширину. Или проблемы с брекпойнтами... Все это проблемы с масштабированием в BrowserStack. Физически разрешение машины, на котором идет процесс тестирования меньше разрешения эмулируемого устройства. Отсюда и все эти траблы. Стоит протестировать на реальном планшете - всех этих багов нет.

[@rootwood1981]

Если можно, то чу-чуть по медленее

[@dbuzeninka8005]

Я заметил, что на каждом видосе по 2% дислайков

[@d3i0]

Всё? Шорты мертвы?

[@HTMLAcademyTV]

Нет, работаем над улучшением.

[@NazironX]

Сумбур. История вперемешку с чем-то... Что-то с чем-то. Нет визуализации - кто-то в кадре быстро говорит. О технологиях почти ноль. За что-то тут лайк?

[@NazironX]

Полезной информации процентов 20 на всё видео.

[@kartopla123]

а как же Амиго и Тор?

[@dimap.7298]

амиго тоже хромиум, а тор просто фаирфокс без хистори и прочих следов на компе.

[@WhiteBriar]

А как же браузер Gavno от фирмы Рога и Копыта?

[@FaceBook-bd3xo]

опять этот тормоз все теорию говорит.ты практику говори

[@fmleglrmglrml]

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

[@HTMLAcademyTV]

Вадим не говорит о том, что не нужно учиться делать кроссбраузерные сайты. Собственно, весь шорт как раз посвящён описанию аспектов, которые помогут этому. Но при этом Вадим объясняет фактическую ситуацию с браузерами и говорит о невозможности подогнать результат так, чтобы во всех браузерах вёрстка выглядела абсолютно идентично. Это важно понимать по нашему мнению, но никто не отменяет кроссбраузерность - сайты не должны работать хорошо только в браузере, в котором разрабатывались, а во всех остальных разваливаться.

[@eugenekartashian]

Тааак неинтересно преподнесено...