Задать вопрос

itsjustmypage

Ответы пользователя по тегу CSS

  • Есть ли "правильность" верстки?

    @itsjustmypage
    Смысл в именовании и структурировании CSS-классов такой же, как смысл в именовании и структурировании переменных и функций в программировании. Поддержка кода в логичном понятном и значит легкоподдерживаемом состоянии.

    Универсальное правило, если нет своего осознанного пути, использование БЭМ методологии и именование по смысловой нагрузке элемента.

    Не .bigBlackButton, потому что кнопка большая и чёрная, а .sendNudesButton, потому что кнопка отправляет нудесы.

    .wrapper, .row и прочее это универсальные утилитарные классы, их часто используют, когда, например, нужна какая-то обёртка ради обёртки или вроде того, которая не играет роли в структуре документа.

    А что касается технической и пользовательской стороны, правильность заключается в соблюдении спецификации HTML (нужные семантические теги на нужных местах, правильная вложенность и т.д.) и поддержке доступности для пользователей с нарушениями зрения (всё на странице можно сделать с помощью клавиатуры, все составляющие документа правильно проговариваются в голосовых помощниках).
    Ответ написан
    Комментировать
    Комментировать

  • Где грамотнее прописывать позиционирование элементов при верстке с помощью bootstrap как класы в html или как свойства в css?

    @itsjustmypage
    Именовать все элементы своими css-классами по смыслу существования элемента (если у тебя блок с информацией о пользователе, именуй как-нибудь вроде .user_info), а не по внешнему виду. А все эти центрирования уже применять в этих классах внутри .css файлов, можно в виде миксинов как в препроцессорах https://sass-lang.com/documentation/at-rules/mixin
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно научиться делать такой объект?

    @itsjustmypage
    Писал давно на Stylus+Pug, может поможет чем. Не респонсив, но зато css-счётчик есть)
    https://codepen.io/Arkham80/pen/MbYRzd
    Ответ написан
    Комментировать
    Комментировать

  • Какие существуют "общие" правила по верстке 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
    Ответ написан
    Комментировать
    Комментировать

  • 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
    Ответ написан
    1 комментарий
    1 комментарий

  • 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 для зависимости от размера текста. Если никакие из этих зависимостей не нужны, просто используй пиксели.
    Ответ написан
    Комментировать
    Комментировать

  • CSS3 - Zoom effect - как сделать?

    @itsjustmypage
    Так-то там просто изменяется transform у элемента через атрибуты translate3d и scale3d, а потом модальное окно на весь экран.
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить блок на вертикальную позицию?

    @itsjustmypage
    Из кода на сайте это примерно то, что вам нужно. tQNcqoZ.png

    Для понимания сути происходящего:

    Появляющийся снизу блок - это просто скрытый блок (display:none), появляющийся при наведении мыши на другой основной блок (смена display:none на display:block через псевдокласс :hover у основного блока). Расположение указывается засчёт указания позиционирования у появляющегося блока относительно родителя (с помощью position:absolute), причем у родителя обязательно должно быть указано позиционирование, отличное от стандартного static (укажите position:relative), чтобы вспомогательный блок позиционировался именно относительно него. Далее для вспомогательного блока указывается само его расположение (top: 100%), означающее, что он отступает на 100% высоты от основного блока и располагается внизу.

    Итого - нужно сделать как выше, только изменив отступ top:100% на left:100% и top:0. Ну и размеры ограничить желательно.
    Ответ написан
    1 комментарий
    1 комментарий