Ответы пользователя по тегу HTML
  • Как стилизовать часики в input="time"?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ответ написан
    Комментировать
  • «Семантические» HTML5 элементы — это аттавизм?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Не всё так радужно, как задумывалось, но смысл в их использовании есть.
    От каких то тэгов больше - от каких то меньше.
    Но если что-то можно сделать не прилагая почти никаких усилий и получить от этого пользу, то почему этого делать не стоит?

    https://habr.com/ru/company/htmlacademy/blog/546500/

    Основных поинтов использования семантики 3.
    1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
    2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
    Если коротко: ссылки в div будут озвучены как: *ссылка*.
    Ссылки в nav: "ссылка, навигация"
    https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
    https://www.youtube.com/watch?v=RQiN1Hhrxu0
    3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
    https://siteclinic.ru/blog/technical-aspects/html5...

    с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

    1) Про пользователей выше
    2) Про вёрстку - удобнее читать
    3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
    4) Про поисковые системы выше.
    Ответ написан
    11 комментариев
  • Как сделать поле в форме для добавления тегов?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    bootstrap это больше про саму про вёрстку и css.

    Вам же нужен готовый компонент multiselect.
    Например, вот подборка компонентов по запросу jquery chips multiselect
    https://www.jqueryscript.net/blog/best-multiple-se...

    А вот очень многофункциональный и популярный jquery плагин: https://select2.org/getting-started/basic-usage
    Ответ написан
    1 комментарий
  • Как найти исполняемый js код конкретного блока?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Что значит "конкретной обёртки?
    Обработчик какого-то элемента?
    Открывайте инструменты разработчика, тыкайте селектором в элемент.
    И на той панели где отображаются стили элемента есть вкладка "Event Listeners" ну или том языке, какой у Вас выбран. Там можно посмотреть все обработчики данного элемента.

    Если что-то другое, то можно открыть вкладку Sources, сбоку в "проводнике" найти js файлы и искать код там.
    Ответ написан
    Комментировать
  • Блок не прижимается к краю блока?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    .chat__mesage {
      margin-left: auto;
    }


    Но только в этом Вашем случае, потому что там у Вас какой то армагедец в css...
    Ответ написан
    Комментировать
  • Почему высота Div не по размеру контента внутри него?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    height: 65px;
    Действительно... почему....
    Ответ написан
  • Возможно ли подменить поведение div на button, чтобы работала навигация по клавише Tab?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Когда нажимаешь на клавишу tab еще раз, то следующаяя ссылка не подсвечивается, но должна.

    А чего это вдруг "должна"?
    Навигация между табами осуществляется стрелочками.
    Вот статья с примерами на основе стандартов доступности:
    https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

    По табу должно переходит фокус на контент таба, а не на следующий таб.
    Ответ написан
    1 комментарий
  • Как сделать список в списке?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Как сделать список в списке?

    Сделать список в списке.

    А циферки можно с помощью css счётчиков

    https://stackoverflow.com/questions/2729927/number...
    Ответ написан
  • Какую библиотеку использовать для постепенной анимации элемента при скролле страницы?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну конкретно такое не сложно сделать и самому - подписаться на скрролл, в зависимости от значения делать transform для слоёв.
    А так часто используют GSAP\ScrollMagic для сайтов с нестандартными анимациями при скроле
    https://greensock.com/scrollmagic/
    Написано только что
    Ответ написан
    Комментировать
  • Как сверстать такой эффект тексту?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://css3gen.com/text-shadow/
    text-shadow: -2px 0px 0px rgba(255, 0, 150, 1);
    Ответ написан
    Комментировать
  • Как вложить в тег li изображения и еще список и подзаголовок?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Тут всё зависит от контекста.
    Если эти 4 блока между собой связаны, то есть демонстрируют некоторое перечисление, и можно их представить в виде плоского списка\перечня элементов, то да, СЕМАНТИЧЕСКИ более правильно сделать это списком.
    Внутри li можно размещать практически какую угодно информацию.
    При этом, на деле очень много кому семантика не важна и сделать дивами - тоже ок. Зависит от требований продукта и степени клиентаориентированности.

    Соответственно, если эти 4 блока никак между собой не связаны, просто 4 слуайных элемента с разной информацией, о разном, никак не объединяются под какую то общую сущность, типа "меню" \ "сегодня в кино" \ "товары" \ "наши особенности" \ "контакты" и так далее - то можно и дивами.

    НО, мне утверждают что это неверно! Что надо эти 4 блока сделать как блок ul, в котором будут 4 элемента li

    Ну и когда Вам кто-то что-то утверждает, то спрашивайте аргументацию, ознакомьтесь с этой аргументацией и сделайте вывод. И только если Вы с ней не согласны, имеете свои контр аргументы, тогда можно пойти и задать вопрос на суд сообщества.
    Ответ написан
    1 комментарий
  • В каком порядке будут отрисованы html-элементы на странице (всего 14 строк кода)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну, чтож.. я не то чтобы прям хорошо в этом разбираюсь и браузеры постоянно работают над оптимизацией загрузки ресурсов и отрисовки, но, в целом, примерно так:
    0) html стримится, поэтому всё идёт неким потоком, а не по блокам.
    1) Браузер получил html, встретил в head ссылки на русурсы, пошёл их в параллель получать.
    2) Так как в скриптах может уже выполняться какая-то синхронная работа, то браузер дождётся загрузки и выполнения script1.
    3) Стили могут всё ещё грузиться, а могут и нет.
    4) Начинает строиться DOM. Браузер увидит картинку и пойдёт её загружать в паралель. Так как атрибутов width и height не указано (и если в style.css тоже не указано) то место под картинку зарезервировано не будет.
    5) Увидит script2, начнёт его загружать, пойдёт дальше строить DOM. (Скрипт выполнится как только загрузится и распарсится браузером. Так как стоит async - когда это произойдёт нам не известно. То есть может заблочить дальнейшее построение DOM, а может и нет. )
    6) Увидит script3, так как он без атрибутов, то будет дожидаться загрузки и выполнения в синхронном режиме. Велика вероятность что выполнится раньше script2.
    7) DOM готов, если CSS загрузился, то DOM и CSSOM мержатся в Render Tree -> происходит первичная отрисовка.
    8) DOM Content load
    9) Если под картинку всё же не было указано размера, и она ещё не загрузилась к этому моменту, то по факту её загрузки произойдёт перекомпановка и перерисовка, иначе только перерисовка. (всегда стоит стремиться сводить перекомпановки, известные так же как reflow, к минимуму и вызывать только перерисовки, известные как repaint)

    На деле всё сильно сложнее, браузер как-то там ещё бьёт на токены, но я так глубоко не знаю
    Ответ написан
    Комментировать
  • Как сделать генерацию страницы с результатом сайта на html?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    1. Зачем Вы указали тэг PHP если бэка нет?
    2. Можно создать одну страницу, которая на основе гет параметров будет показывать соответствующую разметку. Например, ?score=10&resultId=2 - соответственно 10 баллов и айди изображения - 2.
    Судя по всему это какой то пет проект. При таком подходе пользователь который понимает хоть чуть чуть в том как работают сайты, в частности адресная строка, легко может подменять гет параметры и видеть любой результат. Если это не проблема - то ок.

    Можно заменить цифровые значения ключевыми словами, тогда пользователю будет их сложнее подобрать или если посмотрит в разметке.

    Альтернатива - можно всё то же самое зашивать в base64 и передавать в урл одним гет параметром. Порог продвинутости пользователя чтобы посмотреть другие страницы повышается.

    Следующий этап - добавлять в base64 строку так называемую соль. То есть дополнительную строку, которая будет "портить" конечный результат. И на клиенте это обрабатывать. Ещё больше повышает порог продвинутости пользователя для возможности декодировать вашу base64 строку и приближает к уровню "разработчик".
    Ответ написан
    3 комментария
  • Одинаковые стили и структура по разному ведут себя на разных сайтах?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Точно стили одинаковые?
    Сайт: https://spb.gymbalance.ru/o-hudozhestvennoj-gimnastike/
    Файл: themes/glav-gymbalance/style.css?ver=6.0.1
    Строка: 666
    .row > * {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--bs-gutter-x) * 0.5);
      padding-left: calc(var(--bs-gutter-x) * 0.5);
      margin-top: var(--bs-gutter-y);
    }
    Ответ написан
  • Как осуществить движение объекта в html с помощью JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну Вы перемещаете на 50 пикселей, тут как не крути - плавно не будет.

    Есть 2 варианта:
    Перемещать через css transition. Тогда нужно указать для этого блока transition: left 0.3s linear
    Либо понизить шаг перемещения, а так же воспользоваться функцией requestAnimationFrame

    P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.
    Ответ написан
    4 комментария
  • Это работает по принципу dropdown (выпадающие списки / меню), как правильно верстать или загуглить?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1. dropdown это сам выпадающий блок, как правило с абсолютным позиционированием или относительно родителя. На картинке - accordion (причём dropdown может быть частью accordion. В dropdown показывается контент, а над ним элемент активатор)
    2. Не существует правильной или не правильной вёрстки. Есть вёрстка, которая отвечает требованиям и которая не отвечает.
    3. Ну а так, есть примеры "от w3c" как верстать разные ui элементы с хорошей доступностью. Например https://w3c.github.io/aria-practices/examples/acco...
    Ответ написан
    Комментировать
  • Как браузер выполнить наложение эти стилей в данном случае?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Длинный ответ:
    https://developer.mozilla.org/ru/docs/Web/Performa...

    Короткий ответ:
    Для каждого узла найдёт соответствующие правила и применит наиболее приоритетное из них. В данном случае - из медиа. А вот эта формулировка "сначала одно потом другое" - лишена смысл. Файл само собой читается последовательно, а не все строки одновременно.

    Браузер сначала задаст высоту 30, а потом 60, тем самым вызвав два рефлоу?

    Рефлоу - это когда уже страница была отрисована. На первичной отрисовке это, по идее, произойдёт в первом случае при построении render tree(title в него не попадёт, так как display: none), во втором, при компоновке. Но в обоих случаях до первичной отрисовки.

    То есть куда улчше было бы использовать еще и media min-width?

    Зачем намеренно утяжелять дерево стилей?
    Ответ написан
    7 комментариев
  • Можно ли использовать киррилицу в дата аттрибутах или где нибудь еще?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Если в качестве значения - и пробелы и кириллические символы - почему нет? Почему это должно не поддерживаться? Текст же на кириллице поддерживается. Кириллическая строка всё та же строка, только с другим набором символов.

    А вот в качестве ключей или названий атрибутов я бы не рисковал. Если конечно это какой-то пет проект только для самого себя и работает, то ещё допустимо, но в прод бы не выкатывал. Разные ОС, разные браузеры, несколько разный подход к кодированию\декодированию кириллических символов и тд и тп. Ну и вообще есть спека, регламентирующая какие символы где можно использовать. Ну и как минимум это можно сказать антипаттерн.
    Ответ написан
    Комментировать
  • Как сделать свайп блока (Желательно VUE)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://qna.habr.com/q/879393#answer_1791997

    низкомолекулярный макрос, Вот тут можно посмотреть реализацию на сайте (через эмуляцию или на реальном мобильном, нужно нажать на зелёную кнопку снизу):
    https://svoefermerstvo.ru/catalog/root
    На яндекс картах в мобильной версии так же есть такая "шторка"

    Работает как по кнопке, так и свайпом.
    Ответ написан
    Комментировать