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

Вадим

Верставший фронтендер
Ответы пользователя по тегу Вёрстка

  • Как сделать фоновое изображение для текста?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    с помощью -webkit-background-clip: text;

    Но не очень широкая поддержка.

    Либо с помощью свг:
    css.yoksel.ru/svg-masks
    https://habr.com/ru/post/349362/
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно именовать секции при проектировании сайта?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Блоки могут быть разного уровня абстракций.
    • Если это какой-то переиспользуемый блок, внутри которого может быть разное содержимое, скажем, разметка слайдера, в котором могут быть как новости, так и товары - то да, такое именование не корректно.
    • Если это страница для какой-то cms то тоже будет не совсем корректно, так как контент любой секции в любой момент может поменяться.
    • Если это лэндинг, который сверстал и забыл - то ок.

    Если у Вас возникает ситуация. когда именуете заголовки так:
    services__title, about-us___title
    то значит Вы используете приём миксования из бэма. Но это высказывание корректно только если у Вас заголовок имеет такие классы:
    .title.services__title - основные стили в title, в services__title стили, которые присущи заголовку только в этом блоке. Например, внешние отступы.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не подгружается background в виде картинки в vs code?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Вам нужно указывать путь до картинки относительно итогового css файла, а не текущего scss.
    Скажем, если все scss компилируются в итоговый style.css, а итоговая файловая структура такая:
    index.html
/styles
└ style.css
/images
└ header-bg.jpg


    То в scss нужно указать путь до картинки как ../images/header-bg.jpg
    Ответ написан
    1 комментарий
    1 комментарий

  • Как верстать доступные сайты?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    То, о чём Вы спрашиваете, официально называется WAI-ARIA.
    Тут можно скачать бесплатно экранного диктора и с помощью него тестировать свои сайты, осуществляя навигацию по ним с помощью табуляции, а так же открывая специальное меню с помощью горячих клавиш (командная кнопка приложения, которую назначите, по умолчанию ins+f7, или f6? Не помню уже точно :-) )

    Доклады Вадима Макеева на ютубе:
    https://www.youtube.com/watch?v=MWJKwn_gKR4
    https://www.youtube.com/watch?v=ssJsjGZE2sc

    Если действительно умеете соблюдать семантику, то, скорее всего, Вы уже сделали достаточно.
    Рускоязычные ресурсы по доступности:
    https://weblind.ru/
    specialbank.ru/guide (В данный момент чёт не работает, но должен)
    Есть курс, где учат именно этому: https://kurmak.info/
    Статья на хабре: https://habr.com/ru/post/40730/ (там внизу есть полезные ссылки)
    Тут можно найти информацию по этому вопросу, в том числе перевод статей из первой ссылки англоязычных ресурсов

    В подкасте Веб-стандарты упоминается об этом очень часто. Тут можно прослушать все выпуски, а так же покопаться в выпусках и поискать упоминания доступности и статьи про это.

    Есть англоязычные ресурсы
    Про доступные компоненты: https://inclusive-components.design/ (нажимаете в хроме справа сверху "перевести страницу" и профит)
    Есть спецификация: https://www.w3.org/TR/wai-aria-1.1/#usage (аналогично, перевод в браузере и профит)
    MDN: https://developer.mozilla.org/en-US/docs/Learn/Acc...
    Ответ написан
    1 комментарий
    1 комментарий

  • Как при скроле показать последнюю активную хлебную крошку?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    css media + 
    .bread-crumbs {
  justify-content: flex-end;
}


    Ну а если через JS, то как-то так:
    var crumbs = document.querySelector('.bread-crumbs')
crumbs.scrollLeft = crumbs.scrollWidth
    Ответ написан
    3 комментария
    3 комментария

  • Сайты которые помогут изучить Js для вёрстки?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Learn JavaScript
    MDN
    JavaScript Garden

    На ютубе рекомендую этот канал. (ссылки на плейлисты с него)
    https://www.youtube.com/watch?v=FX2fiUvrYP4&list=P...
    https://www.youtube.com/watch?v=aQkgUUmUJy4&list=P...
    И так ещё по каналу посмотрите отдельные видео.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать полоску для текста как фон на половину его высоты. HTML?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Ответ написан
    1 комментарий
    1 комментарий

  • Есть ли такие ситуации где гриды вообще не к месту, а флексбокс подойдёт?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    В целом, всё на ваше усмотрение. Раньше для сеток вообще исопльзовали таблицы или float. Которые для этого не предназначены.
    Однако, считается хорошим выбором чтобы использовать гриды для сеток\раскладок элементов, а флексы уже внутри блоков для выравнивания, порядка и тд. Когда нет чёткой сетки или она не нужна и тд.

    свежак:
    https://www.youtube.com/watch?v=ST1EvRemB_U

    Гриды были созданы для сеток\раскладок.
    А флексы для управления потоком элементов.

    Опирайтесь на тз, браузерную поддержку и здравый смысл.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как в textarea вывести динамически количество набираемых символов?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Использовать событие input на textarea и в обработчике брать event.target.value.length - количество вбитых символов. И пропихивать в этот счётчик.

    const ta = document.querySelector(...) // textarea
const counter = document.querySelector(...) // счётчик

ta.addEventListener('input', onInput)

funcion onInput(evt) {
const length = evt.target.value.length
counter.textContent = length
}


    Ответ написан
    4 комментария
    4 комментария

  • Как сверстать стрелочку?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Да вариантов хоть отбавляй. Зависит от вашей фантазии.

    Можно сделать из двух псевдоэлементов ::before, ::after, Задав правильное позиционирование, transform-rotate и border (или width\height + background-color).

    Можно из одного (псевдо)элемента. Делайте квадратик, задаёте границу с двух смежных сторон, а не полную - профит. В этом случае может не получиться полного красивого скругления всех углов стрелочки.

    Можно жёстко задать размер блока, скрыть overflow, запихнуть внутрь блока букву "К" и подобрать соответствующий размер шрифта, чтобы осталась видна только такая вот "стрелочка" :-D

    SVG\Canvas не предлагаю т.к. тэг CSS :-)
    Ответ написан
    Комментировать
    Комментировать

  • В чём минус вёрстки дивянками?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    1) Вы не помогаете ни себе в будущем, ни будущему разработчику читать код сайта. Так как всё - див, то не понятно на первый взгляд, функциональный он или же просто обёртка. Хотя див по своей задумке должен быть обёрткой и только обёрткой.
    2) Вы не помогаете людям, пользующимся интерфейсом не только мышкой, не только глазами. Семантические теги помогают строить дерево доступности, которое помогает быстрее навигироваться по странице и понимать что на ней вообще есть.
    3) Вы не помогаете поисковым системам понять, что на сайте за контент. Поисковые системы любят семантику. Любят семантические сайты. Поэтому если всё хорошо размечено, то в поисковой выдаче сайт будет выше, а так же может быть более качественный и информативный сниппет ответа на запрос пользователя, а это положительно сказывается на пользовательском опыте и конверсии для сайта.
    4) Если Вы даже кнопки и ссылки верстаете дивами, то гореть вам синим пламенем Вы теряете нативное поведение этих элементов, которое Вам придётся эмитировать. Причём полностью повторить его, скорее всего и не удастся. Например: если вместо ссылки Вы делаете div c событием onClick, в обработчике клика указываете что нужно перейти на такую-то страницу, то переход будет осуществляться СТРОГО по событию клика. На этом диве Вы не сможете нажать колёсиком, как на ссылке, чтобы открыть её в новой вкладке. На этом диве, если нажать правой кнопкой мыши, в контекстном меню НЕ будет кнопки "Открыть в новой вкладке". На этом диве Вы НЕ сможете использовать CSS селекторы :active, :visited и тд. Если это див будет, каким-то чудом, в фокусе, Вы НЕ сможете нажатием на пробел "перейти по ссылке" и это только то, что касается ссылок, и то не всё.

    В чём минус вёрстки только дивами? Проще ответить на вопрос: в чём достоинство? Ответ: ни в чём.

    P.s. Да, можно достичь почти всего вышесказанного только дивами, но для этого нужно грамотно и весьма геморно пользоваться aria-* и role атрибутами, а так же городить кучу лишнего js`а.
    Ответ написан
    Комментировать
    Комментировать