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