Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (5)

Наибольший вклад в теги

Все теги (25)

Лучшие ответы пользователя

Все ответы (8)
  • Div, который выглядит по-разному в каждом браузере?

    @itsjustmypage
    Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

    Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

    Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

    https://www.w3.org/TR/css-ui-3/#outline-offset
    5b447ea6c9061121780680.jpeg

    Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно. AMQ4hnM.gif
    Ответ написан
  • Шаблоны с хорошей вёрсткой на чистом HTML и CSS есть ли такие ресурсы?

    @itsjustmypage
    Открываешь разные проекты
    Нажимаешь F12
    Смотришь примеры хорошей (не обязательно) вёрстки

    Для конкретных элементов (формы, модалки, вылезающие панели) лучше искать их отдельно и смотреть примеры в поиске на codepen.io

    Ещё есть всякие сборники UI типа таких:
    https://googlechromelabs.github.io/ui-element-samples/
    https://css-tricks.com/snippets/html/
    https://www.w3schools.com/howto/default.asp
    https://tympanus.net/codrops/category/blueprints/
    Ответ написан
  • Как переопределять класс на каждой странице jade?

    @itsjustmypage
    На каждой странице:

    extends /core/core.pug // подключаем шаблон
    
    // создаём блок переменных, где объявляем наши переменные для страницы
    block variables 
    	- var pageClass = 'mainPage';		//- <body class="HERE">


    В самом шаблоне:

    block variables // подключение блока переменных со страницы в самом начале
    
    // код вашего шаблона
    doctype html
    html.no-js(lang= pageLang)


    Примечание: в jade работало, только если на страницах сначала объявлен блок переменных, а потом подключён шаблон. В pug можно и так и так.
    Инструкция по блокам в pug: https://pugjs.org/language/inheritance.html

    p.s. Можно прописать базовый путь для pug при сборке в галпе, так проще подключать шаблон на страницах.
    gulp-pug( {basedir: *путь*} );
    Ответ написан
  • Как профессионально протестировать фронтенд?

    @itsjustmypage
    Чек-листы вёрстки
    https://frontendchecklist.io/
    https://github.com/thedaviddias/Front-End-Checklist
    https://habr.com/post/114256/
    https://habr.com/post/319664/

    Неплохие ответы по "как вы тестируете вёрстку"
    Как тестировать верстку?

    Можно ещё добавить проверку в DevTools LightHouse (встроен в хром) и линтеры при сборке.

    А вообще инструментов полно, но не все популярны. А проверять нужно чуть больше, чем визуальную составляющую.
    Ответ написан
  • CSS em rem % вопросы по относительным еденицам - что лучше...и как?

    @itsjustmypage
    3) Потому что это практически никогда никому не нужно. Есть ещё нужда для поддержки изменения базового размера шрифта в браузере пользователя - если он поставит в настройках 150%, чтобы все шрифты отталкивались от этого размера. Но опять же, это не слишком частоиспользуемая возможность, к тому же вероятно, что верстка поедет. Сейчас все пользуются обычным масштабированием, не спрятанным глубоко в настройках браузера, а масштабирование от rem единиц не зависит и верстку обычно не ломает.

    4) Насколько я знаю, это писали из-за бага в IE6/7. Сечас в этом нет смысла.

    5) Всё отличие отступов и размеров в px против em лишь в том, что последние зависят от размера текста. Это удобная техника для масштабирования элементов, достаточно лишь увеличить размер текста, как отступы увеличатся пропорционально тексту. Однако нужно понимать где лучше использовать em, где rem, а где просто px. Вот неплохая статья на эту тему https://zellwk.com/blog/rem-vs-em/

    6) Относительные единицы нужны, но это не панацея. Сами px являются относительной единицей по сути, поскольку являются CSS-пикселями, зависят от плотности экрана и не равны физическим пикселям на экране. Проценты существуют для резиновой верстки (сетки с колонками по 25% ширины родителя, например), вьюпорт-единицы (vh, vw, vmin, vmax) нужны, когда нужно ориентироваться на размеры экрана (полноэкранный сайт, резиновые размеры шрифта и т.д.), rem и em для зависимости от размера текста. Если никакие из этих зависимостей не нужны, просто используй пиксели.
    Ответ написан

Лучшие вопросы пользователя

Все вопросы (14)