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

Достижения

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

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

Все теги (27)

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

Все ответы (10)
  • 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
    Ответ написан
  • Какие существуют "общие" правила по верстке web страниц?

    @itsjustmypage
    Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
    Подключить normalize.css (body margin 0 там тоже есть).
    Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
    Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
    Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
    Использовать какую-либо методологию вёрстки (обычно БЭМ).
    Верстать модульно, максимально независимыми блоками (см пункт о методологии).
    Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
    Использовать автопрефиксер для автоматического проставления префиксов в CSS.
    Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
    Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

    Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
    И здесь посмотреть webmasters.teamdev.com
    Ответ написан
  • Шаблоны с хорошей вёрсткой на чистом 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 (встроен в хром) и линтеры при сборке.

    А вообще инструментов полно, но не все популярны. А проверять нужно чуть больше, чем визуальную составляющую.
    Ответ написан

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

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