Кроссбраузерная вёрстка - HTML Шорты
HTML-код
- Опубликовано: 8 сен 2024
- - Логотипы всех браузеров - 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...
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
«Сайты не должны выглядеть одинаково во всех браузерах» - главная мысль выпуска!
Когда это до всех дойдёт?!
Боюсь, что никогда … :,(
Последний раз слышал про пиксел перфект года полтора назад, даже фриланс подопустило от это херни
"Усложнять простое проще, чем упрощать сложное" -- це генiально!
Вадим, ты крутой!
"Пиксель-перфект - это попасть в сетку и в горизонтальные размеры блоков, то у вас есть шанс" Это шедеврально !!!!
Бомбезный формат. Автор спасибо!
Очень толково!
Мало что поняла, но главную мысль вроде ухватила.Спасибо. Ведущий Огонь! :)))
Спасибо, Вадим! Всегда интересно и по делу!)
Прекрасный путеводитель, чудесная история очень интересно и здорово. Вадим , у меня, у новичка один единственный вопрос - почему люди имеющие кучу опыта в верстке и разработке , уделяют инструментам по устранению проблем в браузерах, 1 слово за весь выпуск а именно "префиксы" , я больше ни чего из этого видео полезного не вынес . Первый раз пишу комментарий такого тона , от непонимания соотношений опыта и конечного результата в виде баллад о движках.
Вы говорите о пожеланиях в коменты , вот мои :
-Рассказывайте нам новичкам о инструментах для решения проблем, а не о том о чем вы холиварите на элитных автопартях ("сайты не должны выглядеть одинаково" и бла бла бла - какая к черту разница если это в конечном счете всё равно индивидуально ), я рассчитывал открыть видео и увидеть на что сейчас актуально обратить внимание, с чем познакомиться , что научиться использовать а тут чудесная байка.
-Расскажите нам новичкам про стандарты Js , я учу js что мне нужно знать о стандартах какой учить, что актуально чем отличается и т.д .
Буду очень благодарен.
Олег, префиксы здесь как раз не самое важное. Нет смысла детально разбирать каждое свойство, в котором они встречаются (тем более, это гуглится на раз-два), да и не решат префиксы всех проблем - в этом и есть суть.
Важнее здесь вынести не конкретный инструмент, а полную картину, понять что происходит, зачем и почему. И как нам с вами с этим жить и справляться, чтобы однажды не сойти с ума.
Кстати, конкретные инструкции и курсы есть на сайте Академии.
Полностью с вами согласен , префиксы не решают всех проблем , но какое то количество -да. Байка про движки же не решает ни каких проблем , кроме необходимости счастья от написании байки про движки.
Полная картина же заключена в самом термине "Кроссбраузерность" , картина понятна а вот как раз как нам с этим жить не понятно из ролика , и уж тем более как с этим справится.
Я просто оставил пожелание , не утверждая к слову что префиксы самое главное =) , согласитесь очень странно наблюдать информацию о конкретных инструментах , во втором эшелоне комментариев , а не одной из ссылок в описании , рядом с тулзами для предпросмотра (которые по словам автора не отражают реальности), холиварами и прочими чудесными заметками.
Олег, эти видео не заменяют учебный курс. У нас для этого есть интенсивы - htmlacademy.ru/intensive Мы здесь стараемся очень точечно ответить на частые или просто важные вопросы, которые нам задают. Мы, безусловно, сами выбираем на какие отвечать - такие, которые считаем достаточно интересными.
Вадим , мое пожелание пусть и не вопрос , ответить на него нельзя но "точечно" отреагировать возможно. А вот на вопрос про соотношение вашего опыта и результата на видео , ваш комментарий отвечает целиком и полностью, спасибо за ответ и пояснение по формату рубрики.
Олег Иванович можно ведь и про префиксы выпуск записать ;)
Жаль, что закрыли эту рубрику
Блестяще!
Лайк и подписка за детали и полезность
смотрю на замедленном воспроизведении капец, обычно наоборот бывает)
Расскажите пожалуйста об conditional comments вроде:
С каждым разом паузы между репликами всё заметнее (
Вадим, а можешь рассказать про организацию html и css? Например, большинство верстальщиков обнуляют стили в своих css файлах, затем пишут правила для заголовков, дальше хедер, футер и т.д. Разбиваешь ли ты файлы стилей (думаю, да). Можешь рассказать об этом подробнее?
Моё мнение таково: сайты не должны выглядеть одинаково в разных браузерах, но обязаны быть компактными лёгкими и удобными во всех браузерах.
И жрать как можно меньше трафика. Вот например сейчас я в Opere сохранил вот эту самую страницу youtube, и она весит 2 с лишним мегабайта (не считая картиночек)!!! Если бы я до сих пор сидел на EDGE (2G), эта страница грузилась бы таааааааак долго.
«Сайты не должны выглядеть одинаково во всех браузерах» - только, как мне помнится, пиксель-перфект в критериях в академии :)
У нас есть критерий про соответствие макету с достаточно большими допусками (5px по вертикали и 2px по горизонтали внутри блока). Это очень далеко от пиксельпёрфекта.
Расскажи про will-change в каких случаях его лучше использовать, и про оптимизацию как таковую.
дойдет что html...
должен быть везде одинаково)
а привычки....пофигу)
А то жопа будет полная!!!!
Ты где пропал?
ВОПРОС. Стоит ли пытаться угодить всем? Например есть ли смысл адаптировать сайт под какие-нибудь неизвестные китайские телефоны со встроенными в них неизвестными китайскими браузерами? И где эта черта? Что обязательно на ваш взгляд, а что опционально?
лоооол, вы так похожи на Ходорковского)
О***нное видео! Спасибо вам!
Вадим, расскажите в каких относительных размерах задавать padding: в % или rem? а margin? Что лучше для резиновости? (вопрос стоит только в рамках % и rem)
Спасибо теска)))
Макеев, подскажи или объясни. В каком плане = bem - это не просто договоренности? Bem помогает создавать страницу адаптивной без media запросов, как это?
Эх! Стоило бы про автопрефиксеры упомянуть.
А что насчет разных разрешений экранов в мониторах одного размера? Не могу найти информацию про это.
К примеру 100 пикселей же будут визуально меньше на fullhd в сравнении со ста пикселями на hd экране, если размеры мониторов одинаковые. Это в верстке как-то учитывается?
Самый нормальный браузер Netscape до сих пор пользуюсь
Могли бы вы ответить на один вопрос. Почему в Explorer список не анимирован а на остальных браузерах робота идет как надо ?
Ребят, куда пропали шорты?
Не пропали, пока в отпуске. Ждём потепления - будут шорты!
Добрый день!Расскажите о future detection в верстке.
Крутая программа, но уже прошёл месяц, а новых выпусков нет. Вы случайно не забросили идею про рассказывание сложных и важных вещей подробно, коротко и внятно?
Не забросили, обновляли кое-чего.
Вадим, напомните пожалуйста где вы покупаете футболки =)
Всем привет! Вопрос на засыпку ) Мне пока, что никто толком не сказал ответа. Есть множество сайтов, где ссылки сделаны с эффектом transition. Я специально сделал пустую страницу, где всего лишь одна ссылка с эффектом transition, вот она: ambientfeel.com/test2/index.html , если обновлять страницу (CTRL+F5) либо открывать в новой вкладке, то можно увидеть мерцание - переход от синего цвета до заданного мною цвета в стилях, белого. Это наблюдается только в хроме. Я задавал вопрос владельцам сайтов, у которых есть в меню допустим транзишоны у ссылок, но никакого мерцания нет, и самое интересное, что они сами не могли понять, почему его нет у них на сайте, хотя сделано всё тоже самое, ссылка с эффектом transition. В интернете очень мало инфы про этот баг, но мне больше интересно, неужели люди делают сайты и непроизвольно, непонятным для себя образом решают эту проблему. У кого какие догадки? )
Так я не понял - когда в требованиях к вакансии говорят что надо уметь "кроссбраузерную верстку", что конкретно я должен уметь?
Уметь разрабатывать проекты под разные версии браузеров. А уж какие версии компания для себя считает важным, в каждом случае будет разное.
Футболка уже была!
Я скинул, конечно же, это видео тестировщикам и некоторым заказчикам, но, думаю, им нет дела до всего этого - надо, чтобы было красиво везде. Ты сверстать это, что ли, не можешь? Пф...
А мне казалось что движок вебкит у всех браузеров.
А сейчас обязательно прописывать префексы ?
А как проверить сайт если нет устройства apple
Вадим сразу два способа предложил, или на устройстве пальцем, или сервисы вроде BrowserStack.
ВОПРОС. Почему Firefox так плохо поддерживает 3D анимации (WebGl и в частности ThreeJS) почему падает FPS и как с этим бороться?
Вот на сайте академии, когда проходишь курсы, футер на мониторе 4к висит над нижней границей экрана. Нужно ли что-то делать с такими ситуациями, например, устанавливать min-height: 100vh (или calc(100vh - футер и хедер)) для контента или и так сойдет?
Тут всё зависит от дизайна и содержания страницы. Когда содержание текстовое и его много, таких проблем не возникает. Но если интерфейс более сложный, как в наших курсах, то резиновость по высоте будет не лишней. Мы добавили такую резиновость в обновлённом интерфейсе курсов, который сейчас используется в курсах по JS. Можете сами посмотреть, как он себя ведёт. Правда, там у резиновой высоты есть минимальные и максимальные значения.
Огромное спасибо за ответ! :)
Вадим, мы с другом начали спорить, о том какой из селекторов быстрее для браузера. Друг утверждает, что селекторы типа: ".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".
Как правильно добавлять изображения на сайт? С помощью img или с помощью свойства background для div'a, например?
Через img ,если это контент и bg ,если это декорация. (в большинстве случаев так).
На слух плохо ложиться инфа....
Есть текстовая версия - htmlacademy.ru/shorts/21
ВОПРОС. Как правильно тестировать сайт на предмет кроссплатформенности? неужели нужно покупать все модели телефонов и планшетов?
Есть эмуляторы. С помощью них и тестить.
Шортов больше не завезут?
Завезут второй сезон, нужно немного подождать. Уже почти нужная температура.
Вот откуда новые баги в хроме на айфонах.
Так ты раскроешь секрет, где ты берешь эти майки ?
Вадим, как победить Google PageSpeed Tools на 100/100
У фанатов CSS3 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно
одинаково на всех браузерах". dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
BrowserStack - самый бесполезный инструмент для тестирования iOS.
Сколько раз уже было - тестировщики проверяют сайт в BrowserStack под какой-нить ретина Ipad и рапортуют об обнаруженном баге. Часто это касается поворота устройства - содержимое не перестраивается на всю ширину. Или проблемы с брекпойнтами...
Все это проблемы с масштабированием в BrowserStack. Физически разрешение машины, на котором идет процесс тестирования меньше разрешения эмулируемого устройства. Отсюда и все эти траблы.
Стоит протестировать на реальном планшете - всех этих багов нет.
ВОПРОС. как тестировать сайт на Сафари если нет макбука?
Скачай вм и установи мак ос. Или торрентах есть уже установленными мак ОС с виртуальной машинами.
Сумбур. История вперемешку с чем-то... Что-то с чем-то. Нет визуализации - кто-то в кадре быстро говорит. О технологиях почти ноль. За что-то тут лайк?
Полезной информации процентов 20 на всё видео.
Если можно, то чу-чуть по медленее
а как же Амиго и Тор?
амиго тоже хромиум, а тор просто фаирфокс без хистори и прочих следов на компе.
А как же браузер Gavno от фирмы Рога и Копыта?
Я заметил, что на каждом видосе по 2% дислайков
Всё? Шорты мертвы?
Нет, работаем над улучшением.
опять этот тормоз все теорию говорит.ты практику говори
Такой бред и сумасшествие, в вакансиях так и пестрит эта кроссбраузерность, а вы предлагаете никак её не изучать...вы упали в моих глазах ,нести такую чушь и нести такую смуту... ужас
Вадим не говорит о том, что не нужно учиться делать кроссбраузерные сайты. Собственно, весь шорт как раз посвящён описанию аспектов, которые помогут этому.
Но при этом Вадим объясняет фактическую ситуацию с браузерами и говорит о невозможности подогнать результат так, чтобы во всех браузерах вёрстка выглядела абсолютно идентично. Это важно понимать по нашему мнению, но никто не отменяет кроссбраузерность - сайты не должны работать хорошо только в браузере, в котором разрабатывались, а во всех остальных разваливаться.
Тааак неинтересно преподнесено...