Общее Flashcards
Overflow-x:hidden для и не работает для мобильных. Какое решение?
Обернуть весь документ в потомок body и ему задать Overflow-x:hidden.
Почему стоит перезагрузить компъютер перед проверкой PageSpeed?
Иначе данные могут быть неточными процентов на 20-40 из-за перегрузки оперативки;
Что иногда делает текст атрибута alt=”” при ленивой загрузке со страницей?
Иногда он может давать скролл
Почему лучше делать бургер при ширине экрана менее 900px?
Если в админке заказчик захочет сделать пункты меню длиннее, они будут наезжать друг на друга.
Как лучше всего позиционировать первый экран?
на абсолютах по центру с трансформом (сверху и слева, либо по-другому, согласно макета) - для родителя всего содержимого (заголовка, текста, кнопки) + верхними марджинами подгонять содержимое.
Что делать, если в гугл нет какого-то шрифта? Может, плохо искала?
Нужно поробовать убрать дефис, убрать/добавить пробел и т.д.
Как задать псевдоэлементу z-index ниже родителя?
Нужно задать ему -1, а родителю - любой положительный.
Зачем привыкать делать дополнительный контейнер с классом bg?
Это нужно для того, чтобы заказчик мог менять фон.
Даже если outer имеет ширину 100% - это может измениться в запросах.
Для каких элементов не тегов не работают псевдоэлементы?
img, input, button, textarea, object, select
Псевдоэлементы иногда исчезают, если они находятся абсолютом над элементом, к которому применяется CSS filter:brightness(). Как лечить?
Лечится добавлением псевдоэлементу Z-index-а.
Как запретить перенос слов?
white-space: nowrap;
Паддинги по вертикали и высоты полей заполнения в формах делать только в пикселях! Но ПОЧЕМУ???
Из-за плагина формвалидатор.
Если изображения внутри флекс-контейнера растягиваются без причины, как починить?
align-items: baseline; И плевать, что експлорер не может. Его пользователи должны страдать.
Как делать горизонтальные таймлайны и прочую витиеватую инфографику?
Для вертикального таймлайна есть сниппет, а остальные - на абсолютах, с указанной шириной и мин-высотой, всё в пикселях, в т.ч. позиционирование. Всем элементам TRANSFORM: translateX(-50%, -50%). Привязывать лучше всего к левой и верхней стороне. Для больших экранов- vw, для маленьких - scale для всего предка и обратный scale для текста (заголовки и картинки пускай уменьшаются), затем
разворот из вертикали в горизонталь внешего родителя, SCALE - уменьшить предка и увеличить потомков, и так на каждые 100-200 пикселей, так всё равно будет быстрее
Если нужно сделать 2 фона в одном контейнере, причём один должен накладываться на другой, у какого рисунка условный “z-index” будет больше?
первый рисунок имеет наивысший условный “z-index”
Как будет вести себя калькуляция? font-size: calc (12px + 5vw);
означает, что шрифт всегда будет минимум 12 пикселей, а максимум- зависит от экрана. Шрифт не тает на глазах при уменьшении ширины екрана - одновременно текст переносится и шрифт уменьшается совсем понемногу. Всё пропорционально.
Если по ховеру меняется фон блока, на котором есть инпуты и формы, а з-индекс не помогает и форму под ховером не видно?
Возможно, стоит по ховеру менять именно сам фон. А если фон должен быть полупрозрачным и накладываться на статичный, то просто извлечь из макета картинку с двумя слоями: статичный+ховер. И на ховер её и поставить.
Создание сниппета: что должна содержать каждая строчка?
каждая строчка кода должна быть обёрнута в “двойные кавычки” и иметь запятую в конце. А кавычки, которые должны быть в тексте при вызове сниппета - делать одинарными и экранировать этим слешем: \
Как задать тень тексту?
text-shadow
Если псевдоэлемент before/after начинает наезжать на соседний элемент, что делать?
Нужно элементу - предку псевдоэлемента добавить паддинг размером с ширину/высоту псевдоэлемента, в зависимости с какого направления он наезжает на соседа: горизонтального/вертикального. А псевдоэлементу, если это изображение, можно задать background-position: right; или left, смотря какой стороной он наезжает, и ширину такую, чтобы элемент получил дополнительно невидимую ширину, которая и будет наезжать.
Если нужно удалить перенос строки для текста на мобильных экранах, что делать? А если нужно добавить, например, для футера?
в медиа-запросах удалять тег <br></br>, или, наоборот, показывать при определённой ширине, а в вёрстке - написать <br></br> со свойством display:none
Что такое спрайт?
Спрайт - один графический файл на несколько отдельных картинок.
Посредством CSS нужное изображение извлекается из спрайта и устанавливается в разметку.
Если при наведении не работет :hover, причина может быть:
1) неправильно прописан селектор (соседский вместо дочернего или наоборот и т.д)
2) У одного из родителей отрицательный z-index; - c ним даже события jquery не работают (ховер, события мыши, их делегирование)
В чём суть этого курса (LP dev)?
Не помнить всё наизусть, но знать, что такая проблема уже была и можно подсмотреть её решение.
Если при наведении нужно скрыть подложку объекта, который “прилипает” к своему соседу с помощью отрицательного марджина, при этом подложка “наезжает” на соседа на количество отрицательных марджинов, что делать?
Нужно задать изображению столько же отрицательных марджинов на месте “прилипания”;
Будет не идеально, но наименее криво.
Чтобы радиокнопки работали правильно, у них должно быть одинаковое ???? и разные ??
одинаковое на всех имя name=”” и разные айдишники
Кнопка, содержащая атрибут type=”submit” перезагрузит страницу. Какой атрибут использовать вместо этого?
type=”button”
Что подключает атрибут type=”button” в поле с почтой?
подключает валидацию, встроенную в браузер, стили которой поменять невозможно.
Если нужно сделать изображения, увеличивающиеся внутри себа пор ховеру, но они уже есть в разметке как изображения, что делать?
заменить их на блоки, указать им ширину/высоту, фон, при этом задать ксласс =”img” и везде позаменять юкласс_предка img на .класс_предка .img - РАЗНИЦА В ТОЧКЕ!. + Можно взять селекторы из коносоли. 10 МИНУТ!
Что делать, если из-за анимации скачет фиксированный навбар?
Нужно задать ему свойство transform: translate3d(0, 0, 0)!important;, возможно задать ему ширину в vw
Как сохранять карточки правильно?
Сохранить, пройти по другим страницам, вернуться в редактирование и сохранить как веб-страницу
