Кроссбраузерная вёрстка - HTML Шорты
ฝัง
- เผยแพร่เมื่อ 1 พ.ย. 2017
- - Логотипы всех браузеров - github.com/alrra/browser-logo...)
- Зачем Опере Вебкит, Вадим Макеев - • Зачем Опере Вебкит )
- Голосование за фичи EdgeHTML - wpdev.uservoice.com/forums/25...)
- Прокси-браузеры, Тим Кадлек - • Better By Proxy at Vel... )
- BrowserStack - www.browserstack.com/
- Виртуальные машины с Edge и IE - developer.microsoft.com/en-us...)
- Chrome DevTools Device Mode - developers.google.com/web/too...)
- Должны ли сайты выглядеть одинаково во всех браузерах? - dowebsitesneedtolookexactlythe...
Задавайте вопросы в комментариях к видео. На самые интересные мы ответим в следующих выпусках.
Бесплатные интерактивные курсы - htmlacademy.ru/program
Ближайшие интенсивы - htmlacademy.ru/intensive
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
«Сайты не должны выглядеть одинаково во всех браузерах» - главная мысль выпуска!
Когда это до всех дойдёт?!
Боюсь, что никогда … :,(
Последний раз слышал про пиксел перфект года полтора назад, даже фриланс подопустило от это херни
"Усложнять простое проще, чем упрощать сложное" -- це генiально!
Бомбезный формат. Автор спасибо!
Вадим, ты крутой!
Спасибо, Вадим! Всегда интересно и по делу!)
Мало что поняла, но главную мысль вроде ухватила.Спасибо. Ведущий Огонь! :)))
"Пиксель-перфект - это попасть в сетку и в горизонтальные размеры блоков, то у вас есть шанс" Это шедеврально !!!!
Очень толково!
Блестяще!
Лайк и подписка за детали и полезность
Жаль, что закрыли эту рубрику
Расскажите пожалуйста об conditional comments вроде:
Расскажи про will-change в каких случаях его лучше использовать, и про оптимизацию как таковую.
Вадим, расскажите в каких относительных размерах задавать padding: в % или rem? а margin? Что лучше для резиновости? (вопрос стоит только в рамках % и rem)
Спасибо теска)))
Вадим, а можешь рассказать про организацию html и css? Например, большинство верстальщиков обнуляют стили в своих css файлах, затем пишут правила для заголовков, дальше хедер, футер и т.д. Разбиваешь ли ты файлы стилей (думаю, да). Можешь рассказать об этом подробнее?
О***нное видео! Спасибо вам!
смотрю на замедленном воспроизведении капец, обычно наоборот бывает)
Макеев, подскажи или объясни. В каком плане = bem - это не просто договоренности? Bem помогает создавать страницу адаптивной без media запросов, как это?
Вадим, напомните пожалуйста где вы покупаете футболки =)
Добрый день!Расскажите о future detection в верстке.
А что насчет разных разрешений экранов в мониторах одного размера? Не могу найти информацию про это.
К примеру 100 пикселей же будут визуально меньше на fullhd в сравнении со ста пикселями на hd экране, если размеры мониторов одинаковые. Это в верстке как-то учитывается?
Могли бы вы ответить на один вопрос. Почему в Explorer список не анимирован а на остальных браузерах робота идет как надо ?
ВОПРОС. Стоит ли пытаться угодить всем? Например есть ли смысл адаптировать сайт под какие-нибудь неизвестные китайские телефоны со встроенными в них неизвестными китайскими браузерами? И где эта черта? Что обязательно на ваш взгляд, а что опционально?
Эх! Стоило бы про автопрефиксеры упомянуть.
С каждым разом паузы между репликами всё заметнее (
Ты где пропал?
ВОПРОС. Почему Firefox так плохо поддерживает 3D анимации (WebGl и в частности ThreeJS) почему падает FPS и как с этим бороться?
Как правильно добавлять изображения на сайт? С помощью img или с помощью свойства background для div'a, например?
Через img ,если это контент и bg ,если это декорация. (в большинстве случаев так).
Моё мнение таково: сайты не должны выглядеть одинаково в разных браузерах, но обязаны быть компактными лёгкими и удобными во всех браузерах.
И жрать как можно меньше трафика. Вот например сейчас я в Opere сохранил вот эту самую страницу youtube, и она весит 2 с лишним мегабайта (не считая картиночек)!!! Если бы я до сих пор сидел на EDGE (2G), эта страница грузилась бы таааааааак долго.
Вот на сайте академии, когда проходишь курсы, футер на мониторе 4к висит над нижней границей экрана. Нужно ли что-то делать с такими ситуациями, например, устанавливать min-height: 100vh (или calc(100vh - футер и хедер)) для контента или и так сойдет?
Тут всё зависит от дизайна и содержания страницы. Когда содержание текстовое и его много, таких проблем не возникает. Но если интерфейс более сложный, как в наших курсах, то резиновость по высоте будет не лишней. Мы добавили такую резиновость в обновлённом интерфейсе курсов, который сейчас используется в курсах по JS. Можете сами посмотреть, как он себя ведёт. Правда, там у резиновой высоты есть минимальные и максимальные значения.
Огромное спасибо за ответ! :)
Так ты раскроешь секрет, где ты берешь эти майки ?
лоооол, вы так похожи на Ходорковского)
Крутая программа, но уже прошёл месяц, а новых выпусков нет. Вы случайно не забросили идею про рассказывание сложных и важных вещей подробно, коротко и внятно?
Не забросили, обновляли кое-чего.
Прекрасный путеводитель, чудесная история очень интересно и здорово. Вадим , у меня, у новичка один единственный вопрос - почему люди имеющие кучу опыта в верстке и разработке , уделяют инструментам по устранению проблем в браузерах, 1 слово за весь выпуск а именно "префиксы" , я больше ни чего из этого видео полезного не вынес . Первый раз пишу комментарий такого тона , от непонимания соотношений опыта и конечного результата в виде баллад о движках.
Вы говорите о пожеланиях в коменты , вот мои :
-Рассказывайте нам новичкам о инструментах для решения проблем, а не о том о чем вы холиварите на элитных автопартях ("сайты не должны выглядеть одинаково" и бла бла бла - какая к черту разница если это в конечном счете всё равно индивидуально ), я рассчитывал открыть видео и увидеть на что сейчас актуально обратить внимание, с чем познакомиться , что научиться использовать а тут чудесная байка.
-Расскажите нам новичкам про стандарты Js , я учу js что мне нужно знать о стандартах какой учить, что актуально чем отличается и т.д .
Буду очень благодарен.
Олег, префиксы здесь как раз не самое важное. Нет смысла детально разбирать каждое свойство, в котором они встречаются (тем более, это гуглится на раз-два), да и не решат префиксы всех проблем - в этом и есть суть.
Важнее здесь вынести не конкретный инструмент, а полную картину, понять что происходит, зачем и почему. И как нам с вами с этим жить и справляться, чтобы однажды не сойти с ума.
Кстати, конкретные инструкции и курсы есть на сайте Академии.
Полностью с вами согласен , префиксы не решают всех проблем , но какое то количество -да. Байка про движки же не решает ни каких проблем , кроме необходимости счастья от написании байки про движки.
Полная картина же заключена в самом термине "Кроссбраузерность" , картина понятна а вот как раз как нам с этим жить не понятно из ролика , и уж тем более как с этим справится.
Я просто оставил пожелание , не утверждая к слову что префиксы самое главное =) , согласитесь очень странно наблюдать информацию о конкретных инструментах , во втором эшелоне комментариев , а не одной из ссылок в описании , рядом с тулзами для предпросмотра (которые по словам автора не отражают реальности), холиварами и прочими чудесными заметками.
Олег, эти видео не заменяют учебный курс. У нас для этого есть интенсивы - htmlacademy.ru/intensive Мы здесь стараемся очень точечно ответить на частые или просто важные вопросы, которые нам задают. Мы, безусловно, сами выбираем на какие отвечать - такие, которые считаем достаточно интересными.
Вадим , мое пожелание пусть и не вопрос , ответить на него нельзя но "точечно" отреагировать возможно. А вот на вопрос про соотношение вашего опыта и результата на видео , ваш комментарий отвечает целиком и полностью, спасибо за ответ и пояснение по формату рубрики.
Олег Иванович можно ведь и про префиксы выпуск записать ;)
Футболка уже была!
«Сайты не должны выглядеть одинаково во всех браузерах» - только, как мне помнится, пиксель-перфект в критериях в академии :)
У нас есть критерий про соответствие макету с достаточно большими допусками (5px по вертикали и 2px по горизонтали внутри блока). Это очень далеко от пиксельпёрфекта.
Вадим, мы с другом начали спорить, о том какой из селекторов быстрее для браузера. Друг утверждает, что селекторы типа: ".nav-list .nav-item a", быстрее чем "nav__link", т.е селектор из трёх элементов против одиночного селектора, какой из них будет быстрее?
В силу специфики работы CSS-движка селектор ".nav__link" гораздо быстрее селектора ".nav-list .nav-item a".
В случае селектора ".nav__link" браузер обратиться к индексу по классам, который он заблаговременно выстроил и извлечет оттуда напрямую все элементы, которые соответствуют этому CSS-классу без обращения к DOM-дереву.
В случае селектора ".nav-list .nav-item a" браузер сначала соберет все элементы "A", а потом будет фильтровать их по признаку наличия одного из родительских элементов с классом ".nav-item", а потом оставшиеся будет фильтровать по признаку наличия у соответственных ".nav-item" одного из родителей с классом ".nav-list".
ВОПРОС. Как правильно тестировать сайт на предмет кроссплатформенности? неужели нужно покупать все модели телефонов и планшетов?
Есть эмуляторы. С помощью них и тестить.
А мне казалось что движок вебкит у всех браузеров.
А сейчас обязательно прописывать префексы ?
А как проверить сайт если нет устройства apple
Вадим сразу два способа предложил, или на устройстве пальцем, или сервисы вроде BrowserStack.
Я скинул, конечно же, это видео тестировщикам и некоторым заказчикам, но, думаю, им нет дела до всего этого - надо, чтобы было красиво везде. Ты сверстать это, что ли, не можешь? Пф...
дойдет что html...
должен быть везде одинаково)
а привычки....пофигу)
А то жопа будет полная!!!!
Всем привет! Вопрос на засыпку ) Мне пока, что никто толком не сказал ответа. Есть множество сайтов, где ссылки сделаны с эффектом transition. Я специально сделал пустую страницу, где всего лишь одна ссылка с эффектом transition, вот она: ambientfeel.com/test2/index.html , если обновлять страницу (CTRL+F5) либо открывать в новой вкладке, то можно увидеть мерцание - переход от синего цвета до заданного мною цвета в стилях, белого. Это наблюдается только в хроме. Я задавал вопрос владельцам сайтов, у которых есть в меню допустим транзишоны у ссылок, но никакого мерцания нет, и самое интересное, что они сами не могли понять, почему его нет у них на сайте, хотя сделано всё тоже самое, ссылка с эффектом transition. В интернете очень мало инфы про этот баг, но мне больше интересно, неужели люди делают сайты и непроизвольно, непонятным для себя образом решают эту проблему. У кого какие догадки? )
Вот откуда новые баги в хроме на айфонах.
Шортов больше не завезут?
Завезут второй сезон, нужно немного подождать. Уже почти нужная температура.
Ребят, куда пропали шорты?
Не пропали, пока в отпуске. Ждём потепления - будут шорты!
Вадим, как победить Google PageSpeed Tools на 100/100
ВОПРОС. как тестировать сайт на Сафари если нет макбука?
Скачай вм и установи мак ос. Или торрентах есть уже установленными мак ОС с виртуальной машинами.
Так я не понял - когда в требованиях к вакансии говорят что надо уметь "кроссбраузерную верстку", что конкретно я должен уметь?
Уметь разрабатывать проекты под разные версии браузеров. А уж какие версии компания для себя считает важным, в каждом случае будет разное.
Самый нормальный браузер Netscape до сих пор пользуюсь
На слух плохо ложиться инфа....
Есть текстовая версия - htmlacademy.ru/shorts/21
Если можно, то чу-чуть по медленее
У фанатов CSS3 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно
одинаково на всех браузерах". dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
BrowserStack - самый бесполезный инструмент для тестирования iOS.
Сколько раз уже было - тестировщики проверяют сайт в BrowserStack под какой-нить ретина Ipad и рапортуют об обнаруженном баге. Часто это касается поворота устройства - содержимое не перестраивается на всю ширину. Или проблемы с брекпойнтами...
Все это проблемы с масштабированием в BrowserStack. Физически разрешение машины, на котором идет процесс тестирования меньше разрешения эмулируемого устройства. Отсюда и все эти траблы.
Стоит протестировать на реальном планшете - всех этих багов нет.
Я заметил, что на каждом видосе по 2% дислайков
а как же Амиго и Тор?
амиго тоже хромиум, а тор просто фаирфокс без хистори и прочих следов на компе.
А как же браузер Gavno от фирмы Рога и Копыта?
Всё? Шорты мертвы?
Нет, работаем над улучшением.
Сумбур. История вперемешку с чем-то... Что-то с чем-то. Нет визуализации - кто-то в кадре быстро говорит. О технологиях почти ноль. За что-то тут лайк?
Полезной информации процентов 20 на всё видео.
опять этот тормоз все теорию говорит.ты практику говори
Такой бред и сумасшествие, в вакансиях так и пестрит эта кроссбраузерность, а вы предлагаете никак её не изучать...вы упали в моих глазах ,нести такую чушь и нести такую смуту... ужас
Вадим не говорит о том, что не нужно учиться делать кроссбраузерные сайты. Собственно, весь шорт как раз посвящён описанию аспектов, которые помогут этому.
Но при этом Вадим объясняет фактическую ситуацию с браузерами и говорит о невозможности подогнать результат так, чтобы во всех браузерах вёрстка выглядела абсолютно идентично. Это важно понимать по нашему мнению, но никто не отменяет кроссбраузерность - сайты не должны работать хорошо только в браузере, в котором разрабатывались, а во всех остальных разваливаться.
Тааак неинтересно преподнесено...