Какие свойства браузеру отрисовать тяжелее всего
Здравствуйте. Я только только начал изучать CSS. В интернете много мусора.
Изучая основы я нахожу много таких примеров. Как видно здесь одно и то же свойство для разных браузеров описывается по разному.
1) Эти свойства не входят в стандарт W3C?
2) Насколько я понял для того чтобы указать что свойство применимо для какого-то браузера, надо в начале указать префикс (-webkit или -moz. ) или ещё как ?
3) Если нет, то где можно глянуть свойства для каждого браузера отдельно, я имею ввиду мозила например если свои какие-то поддерживает они должны быть где то описаны?
4) Всё что по теме добавите от себя приму с благодарностью.
Программа для проверки шаблона в разных браузерах при разных разрешениях
Всем доброго времени суток. Я занимаю версткой сайтов и сейчас хочу узнать есть ли программы для.
Элементы находятся в разных местах в разных браузерах
В Хроме всё отображается как нужно, в Мозилле - надпись "Вертянка" уходит далеко от синей штуки.
yii (Поключение разных js,css,meta тегов для разных страниц )
Здравствуйте,подскажите пожалуйста подробнее как грамотно сделать следующее: Есть 2 страницы.
В разных браузерах на разных позициях
Привет! Кто знает почему сайт по одному и тому же запросу находится на разных позициях в разных.
1.-o-,-moz-,-ms- не валидны.
2.Префиксы нужно указывать только для браузеров ,которые не поддерживают стандартное сss3 свойство (например ) transform бно у них есть своя реализация свойства.
-o-опера
-moz-мозила
-ms-ие
-webkit-хром,сафари.
3.Каждый браузер имеет свои свойства.
http://htmlbook.ru/css клацните менюшку справа "По браузерам" и увидите свойства для отдельных браузеров.
Слои в разных браузерах
Добрый день/вечер/ночь =) Возникла "Проблемка" с отображением слоев в браузере firefox Дали.
Сессии в разных браузерах
захожу на сайт через мозилу и авторизуюсь и далее все идет по сессии, захожу через оперу и гугл и.
Смещения в разных браузерах
Кто мне может назвать причину смещений. wall::wall::wall: в разных браузерах смещаются.
Вы вводите название сайта в адресную строку браузера, нажимаете enter, и по привычке видите запрашиваемую страницу. Все просто: ввел название сайта — сайт отобразился. Однако для более любознательных хочу рассказать, что происходит между тем как браузер начинает получать куски сайта (да, сайт приходит кусками, по-другому — чанками) и отображает полностью нарисованную страницу.
Как устроен браузер?
Перед историей о том, как браузер рисует страницу, важно понять как он устроен, какие процессы и на каком уровне выполняются. При знакомстве с процессом рендеринга мы не раз вспомним о компонентах браузера. Итак, под капотом браузер выглядит примерно следующим образом:
User Interface — это все что видит пользователь: адресная строка, кнопки вперед/назад, меню, закладки — за исключением области где отображается сайт.
Browser Engine отвечает за взаимодействие между User Interface и Rendering Engine. Например клик по кнопке назад должен сказать компоненте RE что нужно отрисовать предыдущее состояние.
Rendering Engine отвечает за отображение веб-страницы. В зависимости от типа файла, эта компонента может парсить и рендерить как HTML/XML и CSS, так и PDF .
Network выполняет xhr запросы за ресурсами, и в целом, общение браузера с остальным интернетом происходит через эту компоненту, включая проксирование, кэширование и так далее.
JS Engine место где парсится и исполняется js код.
UI Backend используется чтобы рисовать стандартные компоненты типа чекбоксов, инпутов, кнопок.
Data Persistence отвечает за хранение локальных данных, например в куках, SessionStorage, indexDB и так далее.
Далее узнаем как рассмотренные компоненты браузера взаимодействуют между собой и разберем подробнее, что происходит внутри Rendering Engine. Другими словами …
Как браузер переводит html в пиксели на экране?
Итак, с помощью компонента Network браузер начал получать html-файл чанками обычно по 8кб, что дальше? А далее идет процесс парсинга (спецификация процесса) и рендеринга этого файла в компоненте, как вы уже догадались — Rendering Engine.
Важно! Для повышения юзабилити, браузер не дожидается пока загрузится и распарсится весь html. Вместо этого браузер сразу пытается отобразить пользователю страницу (далее рассмотрим как).
Сам процесс парсинга выглядит так:
Результатом парсинга является DOM дерево. Возьмем к примеру такой html:
DOM дерево такого html файла будет выглядеть так:
По мере того как браузер парсит html файл, он встречает теги содержащие ссылки на сторонние ресурсы ( , , и так далее) — по мере их обнаружения происходит запрос за этими ресурсами.
Таким образом, отправив запрос по адресу прописанному в атрибуте href тега и получив файл css стилей, браузер парсит этот файл и строит так называемый CSS Object Model — CSSOM.
Представим что у нас есть такой файл стилей:
Из которого получим такой CSSOM:
Attention: тут построено дерево из стилей нашего css-файла. Кроме того, также есть user agent's styles — дефолтные стили браузера и инлайновые стили — прописанные в html тегах.
Подробнее об алгоритме парсинга css стилей можно прочитать в спецификации.
Теперь у нас есть DOM и CSSOM - первый отвечает на вопрос «что?», второй на вопрос «как?». Если думаете, что следующим этапом является соединение DOM и CSSOM'а, то вы совершенно правы! DOM + CSSOM = Render Tree.
Render Tree — это дерево видимых (!) элементов построенных в том порядке, в котором они должны рендериться на странице. Обратите внимание, что элементы имеющие css правило display: none или другие, отрицательно влияющие на отображение — не будут находится в render tree.
Браузер строит Render Tree чтобы точно определить что ему нужно отрисовать и в каком порядке. Построение Render дерева происходит примерно так: начиная с рутового элемента (html), парсер проходит по всем видимым элементам (пропуская link, script, meta, скрытые через css элементы) и для каждого видимого элемента находит соответствующее css правило из CSSOM.
В движке firefox'a элементы Render Tree называются фреймами (frames). Webkit использует термин renderer или render object. Render object знает как разместить себя на странице, а так же содержит информацию о своих дочерних элементах. И для самых любознательных, если заглянуть в исходники webkit'a — можно найти класс который так и называется — RenderObject.
Продолжая наш пример мы получим такой Render Tree:
На данный момент мы имеем в некотором состоянии Render Tree — дерево содержащее информацию о том что и как нужно отрисовать. Теперь браузер должен понять на каком месте и с какими размерами будет отображаться элемент. Процесс вычисления позиции и размеров называется Layout.
Layout — это рекурсивный процесс определения положения и размеров элементов из Render Tree. Он начинается от корневого Render Object, которым является , и проходит рекурсивно вниз по части или всей иерархии дерева высчитывая геометрические размеры дочерних render object'ов. Корневой элемент имеет позицию (0,0) и его размеры равны размерам видимой части окна, то есть размеру viewport'a.
В Html используется поточная модель компоновки (flow based layout), другими словами геометрические размеры элементов в некоторых случаях можно рассчитать за один проход (если элементы, встречающиеся в потоке позже, не влияют на позицию и размеры уже пройденных элементов).
Layout может быть глобальный, когда требуется рассчитать положение render object'ов всего дерева, и инкрементальный, когда требуется рассчитать только часть дерева. Глобальный layout происходит, например, при изменении размеров шрифта или при событии resize'a. Инкрементальный layout происходит только для render object'ов, помеченных как «dirty».
Пара слов о «системе грязных битов (dirty bit system)». Эта система используется браузерами для оптимизации процесса, чтобы не пересчитывать весь layout. При добавлении нового или изменении существующего render object — он сам и его дочерние элементы помечаются флагом «dirty». Если render object не изменяется, но его дочерние элементы были изменены или добавлены, то этот render object помечается как «children are dirty».
К концу процесса layout каждый render object имеет свое положение и размеры.
Подводя промежуточный итог: браузер знает что, как и где рисовать. Следовательно — осталось только нарисовать. Этот процесс, как ни странно, называется Paint.
Paint — этап, где пиксель монитора заполняется цветом указанным в свойствах render object'а и белый экран превращается в картину задуманную автором (разработчиком). На всем пути рендеринга — это самый дорогой процесс (не то чтобы предыдущее дешевые).
Также, как и процесс layout, отрисовка (paint) может быть глобальной — дерево перерисовывается полностью, и инкрементальной — дерево перерисовывается частично. Для частичного перерисовывания render object помечает свой rectangle как невалидный. Операционная система расценивает эту область как требующую перерисовки и вызывает событие paint. При этом браузер умеет объединять области, чтобы выполнить разом перерисовку для всех мест, где это необходимо.
Определение размеров и положения элементов дерева (layout) и перерисовка (paint) являются дорогостоящими процессами. Они выполняются на уровне CPU. Разрабатывая динамические веб приложения, в которых эти процессы будут запускаться очень часто — мы никогда не достигнем плавных анимаций.
Значит, должно быть что-то, что помогло бы создавать сайты с богатой анимацией, при этом не нагружая CPU и рисуя каждый кадр менее чем за 16,6мс (60 fps). Действительно, браузер выполняет еще один этап, который помогает оптимизировать динамику сайтов — Composite (композиция).
Перед композицией, все нарисованные элементы находятся на одном слое (memory layer). То есть, изменение параметров (например, геометрических размеров или положения) одних элементов повлекут перерасчет параметров соседних элементов. Но если распределить элементы на композиционные слои — изменение параметров элемента вызовут перерасчет только на определенном слое, не затрагивая при этом элементы на других слоях. Таким образом, этот процесс является самым дешевым по производительности, поэтому нужно стараться вносить изменения вызывающие только composite.
Резюмируя вышесказанное, получаем такой процесс рендеринга веб страницы:
TLDR;
Браузер получает html файл, парсит его и строит DOM. Встречая css стили, браузер их подгружает, парсит, строит CSSOM и объединяет вместе с DOM'ом — получаем Render Tree. Осталось выяснить где расположить элементы из Render Tree — этим занимается задача layout. После расположения элементов, можно начать рисовать их — это задача paint, этап на котором заполняются пиксели экрана.
Динамика
При добавлении новой ноды в dom дерево — очевидно браузеру нужно добавить новый объект в дерево, посчитать его положение на странице, посчитать положения других элементов на странице (если они были аффектнуты новым элементом), и в конце все это нарисовать — звучит дорого. Поэтому делая такие операции необходимо иметь в виду производительность, ведь не каждый пользователь интернета запускает ваше веб-приложение на самой последней модели устройства.
Подводя итог, мы рассмотрели из каких компонентов состоит браузер, как они взаимодействуют друг с другом и как Rendering Engine рисует страницу пользователю.
Посмотреть вышеописанное можно в devtools'ах хрома, но чтобы не выходить за рамки названия статьи — на этом пока все.
Попробую ответить на вопросы, который у Вас могут спросить на собеседовании, на должность верстальщика.
Когда на собеседовании тебе показали кто тут Senior
Вопросы
Какие бывают значения display? Расскажите как ведёт себя каждое свойство.
block
Элемент показывается как блочный. Применение этого значения для строчных элементов, например , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline
Элемент отображается как строчный. Использование блочных элементов, таких, как и
, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block
Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table
inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
list-item
Элемент выводится как блочный и добавляется маркер списка. none Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
run-in
Устанавливает элемент как блочный или строчный, в зависимости от контекста.
table
table-caption
Задаёт заголовок таблицы, подобно применению .
table-cell
table-column
Назначает элемент колонкой таблицы, словно был добавлен .
table-column-group
Определяет, что элемент является группой одной или более колонок таблицы, как при использовании .
table-footer-group
Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой .
table-header-group
Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой .
table-row
table-row-group
Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию .
Что вы знаете о весе селекторов? Каковы значения веса?
Берите в граммах, не жадничайте :simple_smile:
Если условно, есть один быстрый способ выяснить, насколько правило CSS «сильное», путём вычисления специфичности селекторов.
Вес селекторов (по убыванию):
Селектор с наивысшим «счётом» будет преобладать, независимо от порядка, в котором появляются правила CSS.
Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство.
absolute
Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
fixed
Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
relative
Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
sticky
Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Что такое clearfix? Из чего он состоит и для чего он?
Это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов
Мой совет, лучше не верстать))
А в целом, таблицами, будет пуленепробиваемое. Или сейчас есть множество генераторов.
Из чего строится размер элемента?
Из его размера) Но тут есть оговорка на box-sizing
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту содержимого и не включают в себя значения margin, padding и border.
box-sizing: border-box
Свойства width и height включают в себя значения padding и border, но не margin.
Расскажите о различия padding и margin?
margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.
padding
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.
Как ведут себя margin у двух элементов по соседству?
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
- для элементов, у которых на стороне схлопывания задано свойство padding .
- для элементов, у которых на стороне схлопывания задана граница; на элементах с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute ;
- на плавающих элементах (для них свойство float задано как left или right );
- для строчных элементов;
- для .
Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
В теме про display есть овтеты.
Есть ли у тегов предопределённые стили?
Есть, в Консоли можно посмотреть. В частности у input . В разных браузерах может быть по-разному. Если я правильно понял, о чём тут речь)
Как повлиять на вертикальное выравнивание строчного элемента?
Не понятный вопрос… Наверно, речь про vertical-align
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Делает он это сверху вниз, проходясь последовательно по каждой строчке.
Вот крутая статья, по поводу загрузки страницы в целом.
Хотя там мало что, о css.
Какие свойства браузеру отрисовать тяжелее всего?
К ним относятся: box-shadow, border-radius, прозрачность (так как браузер должен высчитывать что показывает под полу-прозрачным элементом), трансформами transform и убийцы производительности CSS фильтры.
«Тяжелее» всего свойства меняющие вид страницы при прокрутке. Например, есть полупрозрачные тени у блоков и один из них закреплен. При прокрутке будет постоянно рассчитываться перекрытие теней.
При изменении каких свойств браузер затратит больше всего ресурсов и почему?
Т.е. те свойства которые заставляют браузер пересобирать слои каждый раз (left/top/right/bottom).
Какие вы знаете псевдоэлементы? Где их используют?
- :after
- :before
- :placeholder
- :selection
Стили прямо в html.
Инлайновые стили «сильнее» стилей в обычном файле css?
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body , чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.
Переводится, как !важный )
Можно им переопределить стили.
Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте.
Печального опыта не помню. Но в целом, надо смотреть как у почтовых клиетов обстоят с этим дела. С background-color не было проблем.
Как отцентровать элемент по горизонтали не зная ширину родительского блока?
margin: 0 auto? , text-align: center , flex, justify-content: center
Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
- таблица
- позиционирование
- tranform
- flexbox
Чтобы было красивенько на всех устройствах.
Какие вы знаете значения размеров в «резиновой» вёрстке?
Эм, брейкпоинты? В нынешнее время их бесконечное множество.
Лучше используйте Адаптивную вёрстку)
Какие бывают значения у свойства background-size? Расскажите о каждом из них.
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?
Вёрстка по правилам. Улучшает? Не уверен…
Чем отличается article от section?
article
section
Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег внутрь другого.
Какие вы знаете способы организации css кода?
Наверно, речь о методологиях.
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
По БЭМ может ли быть блок внутри блока?
Какие из препроцессоров вы знаете? В чём их различия?
scss, stylus, less
Какие из инструментов сборки вам знакомы?
Gulp, Grunt, Webpack (хотя он и не совсем для сборки, но может)
Что к сердцу ближе)
Как происходит «сборка» проекта в Gulp и Grunt?
Как описать в конфиге, так и будет происходить?
Я бы scss выбрал. Но опять же, что к сердцу ближе)
Вы знакомы с Google Pagespeed?
Что такое gracefull degradation?
Функционирование элемента, но с внешними потерями.
Как проверить html-код на валидность?
Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap?
css фреймворк. Новый бустрап, вроде целиком на флексах.
Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.
Вертикальный скролл входит в размер viewport?
Какой размер вертикального скролла?
Обычно она равна 16px, в редких и мобильных браузерах может колебаться от 14px до 18px, а кое-где даже равна 0px.
Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
Как сделать мобильную, планшетную и десктопную версию сайта?
Корректное отображение элементов на ретина экранах.
Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как?
Как можно задавать размеры картинкам?
Можно стилями, можно width, height.
Scalable Vector Graphics — масштабируемая векторная графика.
Что такое иконочные шрифты? Где их искать и как подключать?
Что лучше, делать иконки через SVG или через иконочные шрифты?
Какие вы знаете способы подключения шрифтов к странице?
Ссылкой, инлайново в стилях.
Какие есть способы вставки SVG в HTML? В чём между ними разница?
Инлайново, спрайтом, картинкой.
Как мы можем взаимодействовать с SVG?
Хоть как, если вставлен инлайново.
Как проверить кроссбраузерность тех или иных методов вёрстки?
Лучше на живых устройствах.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.
Как найти элемент на странице с помощью JS и JQuery?
Что вы знаете о замыканиях и областях видимости в JS?
Чем ограничена область видимости JS?
Чем ограничена область видимости Document?
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
Шаблон проектирования MVC предполагает разделение данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: Модель, Представление и Контроллер – таким образом, что модификация каждого компонента может осуществляться независимо.
AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы.
Как вызвать отладчик в разных браузерах?
Расскажите что показывает каждая вкладка в отладчике?
Какие бывают значения display? Расскажите как ведёт себя каждое свойство
Что вы знаете о весе селекторов? Каковы значения веса?
Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство
Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
Что такое float?
Что такое clearfix? Из чего он состоит и для чего он?
Из чего строится размер элемента?
Что такое border-box?
Расскажите о различиях padding и margin?
Как ведут себя margin у двух элементов по соседству?
Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
Есть ли у тегов предопределённые стили?
Как повлиять на вертикальное выравнивание строчного элемента?
Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?
Чем отличается article от section?
Какие вы знаете псевдоэлементы? Приведите пример использования
Как отцентровать элемент по горизонтали не зная ширину родительского блока?
Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
Что такое “резиновая” вёрстка?
Какие бывают значения у свойства background-size? Расскажите о каждом из них
Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
Как сделать мобильную, планшетную и десктопную версию сайта?
Что такое ретинизация?
Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как?
Как можно задавать размеры картинкам?
HTML письма
Расскажите об особенностях вёрстки писем
Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте
Пользовались ли вы какими-то инструментами для тестирования писем?
Browser API
Как браузер “читает” css?
Какие свойства браузеру отрисовать тяжелее всего?
При изменении каких свойств браузер затратит больше всего ресурсов и почему?
Что такое инлайновые стили?
Инлайновые стили “сильнее” стилей в обычном файле css?
Что такое наследование стилей?
Что вы знаете об !important?
Что такое размер viewport?
Вертикальный скролл входит в размер viewport?
Какой размер вертикального скролла?
Как проверить кроссбраузерность вёрстки?
Что такое DOM?
Какие вы знаете способы подключения шрифтов к странице?
Методологии
Какие вы знаете способы организации css кода?
Что вы знаете о БЭМ?
Что вы знаете о SMACSS?
Препроцессоры и сборка
Какие из инструментов сборки вам знакомы?
Что лучше Gulp или Grunt?
Как происходит “сборка” проекта в Gulp и Grunt?
Какие из препроцессоров вы знаете? В чём их различия?
Что лучше Less, SCSS или PostCSS?
Инструменты
Вы знакомы с Google Pagespeed?
Что такое gracefull degradation?
Как проверить html-код на валидность?
Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap?
Что такое SVG?
Что такое иконочные шрифты? Где их искать и как подключать?
Что лучше, делать иконки через SVG или через иконочные шрифты?
Какие есть способы вставки SVG в HTML? В чём между ними разница?
Как мы можем взаимодействовать с SVG?
Что такое JQuery?
Как найти элемент на странице с помощью JS и JQuery?
Что вы знаете о замыканиях и областях видимости в JS?
Что такое AJAX?
Что такое NODE JS?
Что такое NPM?
Расскажите про формат .json?
Зачем нужен package.json?
Знакомы ли вы с AngularJS, Angular, React, Polymer, Aurelia, VUE?
Отличие библиотеки от фреймворка?
Как можно выделить RenderLayer в отдельный композитный слой? overflow: hidden; filter: blur(1px); opacity: .99999; z-index: 0;
transform: translateZ(0).
Какие из утверждений подходят для RenderObject? Создается при указании таких свойств, как opacity и overwflow;
Его обработкой занимается видеокарта; Знает, как растеризовать элемент для вывода на экран; Есть у всех DOM-элементов с визуальным представлением.
Какие элементы находятся в DOM, но не попадают в Render Tree, если не указаны никакие дополнительные css свойства?header; head; title; meta; div; form.
Что вызовет инкрементный Reflow? Изменение класса элемента; Наведение и нажатие на кнопку; Добавление нового элемента в DOM; Изменение размера окна браузера; Первоначальное отображение страницы.
Тест (Тест->Создать тест.->Модульный тест.)
есть нечто подобное в билдере ? или вообще программа создающая тесты и на VS и на билдер и пр.? и с.
Требования к браузеру
Скажите, есть ли какие либо требования к разработке браузера(желательно на делфи)? Просто у меня в.
передача клика браузеру
сделал кликера для работы временной, всё хорошо, но пока он работает - компьютер нельзя трогать.
Передача куков браузеру
Здравствуйте, специально зарегистрировался чтобы задать вопрос. Что делать, если для того чтобы.
1) Как можно выделить RenderLayer в отдельный композитный слой? (filter: blur(1px); transform: translateZ(0))
2) Какие из утверждений подходят для RenderObject? (знает, как растеризовать элемент для вывода на экран; есть у всех DOM-элементов с визуальным представлением)
3) Какие элементы находятся в DOM, но не попадают в Render Tree, если не указаны никакие дополнительные css свойства? (head; title; meta)
4) Что вызовет инкрементный Reflow? (изменение класса элемента; наведение и нажатие на кнопку; добавление нового элемента в DOM)
Добавить историю к браузеру
Здравствуйте друзья! Разработал браузер на delphi 7, так же добавил некоторые функции, хочу.
Кодировка от apache к браузеру
Привет. Проконсультируйте пожалуйста знающие. К примеру я имею 2 сайта: 1. Контент на китайском.
Вывод скрипта определенному браузеру
Требуется вывод одного скрипта только для браузера хром. Есть возможность такое организовать.
Различный ответ браузеру и приложению
Всем привет! Кто - то может подсказать, что я не правильно делаю, и как выйти из этой ситуации.
Читайте также: