• CSS. Как сделать плавный blur у фона?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Но я не рекомендую так делать.
    Блюр на css не везде поддерживается и достаточно прожорливое свойство.
    https://codepen.io/Mr_DECOY/pen/NWYwWxz
    И в свойстве mask по средствам задания процентов градиента можно указывать степень плавности перехода от блюра к чёткой картинке.
    Ответ написан
    3 комментария
  • Экспорт изображений из figma в 1x или 2x?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    1. Нет понятия правильно и не правильно. Есть то, что соответствуют задаче, и остальное.

    2. Это делают не для 4к разрешения, а для мониторов с большей плотностью пикселей. Например, ретина экраны. Но современные десктоп мониторы уже тоже с так называемой одинарной плотностью редко встречаются. Таким образом, для мониторов с маленькой плотностью пикселей загрузится картинка х1, для остальных х2. Таким образом, на мониторах с большей плотностью пикселей картинка сохранит свою чёткость, а не поплывёт.

    3. В идеальном мире Вы должны отдавать пользователю и х1 и х2 в зависимости от его девайса. Ибо зачем пользователю с х1 экраном грузить более тяжёлую х2 картинкку? А так же в нескольких разных форматах (с помощью picture). Например, jpg, webp, avif (браузер загрузит тот что поддерживает). Итого получаем 2*3 = 6 экземпляров одной картинки. А раз наш мир в этом пункте идеальный, то для разных разрешений ещё и разные картинки отдавать, которые больше под это разрешение подходят. Например, обрезают лишнее и сохраняют фокус на важном. Тогда, скажем, возьмём ещё 3 разрешения, получаем 18 экземпляров одной картинки :-) Но, конечно же, даже в идеальном мире, такое делать желательно только с тяжёлыми, размером больше "среднего" и контентно значимыми изображениями.
    Ответ написан
    Комментировать
  • Зачем использовать eventbus в приложениях работающих в браузерах, если есть нативный JS custom event?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Шина событий позволяет реагировать на события независимо от места в иерархии всего дерева компонентов относительно друг друга.

    То есть эти сущности решают несколько разные задачи.
    СustomEvents - про генерацию кастомных событий для построения сложных компонентов.
    EventBus - про подписку на события и реакцию на их возникновение в любом разделе приложения, а не только по потоку вверх, как обычное всплытие события. По сути, event bus включает в себя понятие пользовательских событий. Только custom events это стандартизированная история в браузере, основанная на механизмах стандартных событий.
    Ответ написан
    Комментировать
  • Одинаковые стили и структура по разному ведут себя на разных сайтах?

    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);
    }
    Ответ написан
  • Элемент был заблокирован, как открыть файл программно из js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Из соображений безопасности нельзя насильственно вставлять файлы в инпуты и тригерить на них клик.
    Пока из известных мне - showOpenFilePicker() - позволяет вызвать диалоговое окно выбора файлов, но поддержка не полная.
    Ответ написан
    Комментировать
  • Почему css код срабатывает только на первую кнопку?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    gazes12,
    Почему css код срабатывает только на первую кнопку

    Он срабатывает и на вторую.
    Но конечный рендер разный.

    У Вас на :after элементе стоит z-index: -1 соответственно, он проваливается под саму кнопку.
    В навигации не проваливается из-за display: flex. Объяснения почему так происходит я не помню.

    Сейчас сходу для Вашего решения быстро в голову приходит только вариант обернуть текст кнопки в span, задать ему position: relative и z-index: 1.
    А z-index: -1 для after элемента у кнопки поменять на 0.
    Ответ написан
    Комментировать
  • Как убрать одинаковую высоту Flex блоков div?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    как сделать так, чтобы флексбокс находящийся снизу, прижался к этой строке, заполнив пустоту?

    Никак, это против самой идеи flexbox.

    Вот прижмётся он к верху, заняв пустоту, со следующим что должно произойти?
    По факту Вы спрашиваете про что-то вроде masonry раскладки. Нативно CSS так пока ещё не умеет, насколько мне известно(есть экспериментальная фича за флагом в фаер фокс).
    Копайте в эту сторону

    Либо поменять раскладку с построчной на поколоночную.
    Ответ написан
    1 комментарий
  • Как осуществить движение объекта в html с помощью JavaScript?

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

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

    P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.
    Ответ написан
    4 комментария
  • Как работает backdrop-filter?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Поверьте, читал в интернете, не нашел, вот ссылка https://cozy-blini-ee5759.netlify.app/

    1. У Вас у блоков однородный фон - чёрный. Как Вы хотите увидеть фон под элементом? Background должен быть хотя бы прозрачным.
    2. А Вы попробуйте не на чёрном фоне, намного более заметно как всё у Вас работает.

    А ещё лучше заметно на неоднородных фонах. Поставьте картинку на боди фоном и будет ещё лучше видно.
    62d801c225fab262911193.png
    62d801faac317727555978.png

    Ну а если отвечать на вопрос из заголовка:
    Как работает backdrop-filter

    То в спеке всё описано https://drafts.fxtf.org/filter-effects-2/#backdrop...
    Ответ написан
    Комментировать
  • Это работает по принципу dropdown (выпадающие списки / меню), как правильно верстать или загуглить?

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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А что хранит sessionStorage? Какой тип данных?
    Строку.
    Соответственно
    sessionStorage.getItem('hide') === true // всегда false
    Ответ написан
    6 комментариев
  • Как сделать так чтобы у фоток были свои собственные комментарии а не общие?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    deniskossaa, Ну давайте чуть чуть совсем подумаем.
    Скажем, Вы автовладелец. Как понять что автовладелец именно Вы, а не я? Мы же оба люди, так?
    Где то можно посмотреть, что именно эта машина привязана именно к Вам?

    Дело за малым. Создайте связь между картинками и комментарийями.
    Таким образом, сделаем массив элементов галлереи, каждый элемент которого - объект, у которого есть свойства: src - путь до картинки, comments - массив комментариев к этой картинке, id - уникальный идентификатор картинки для удобства.
    И далее делаем следующую структуру:
    const galleryItems = [
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию'],
        id: 1
      },
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию ко второй картинке'],
        id: 2
      }
    ]

    Ну собственно и всё. Дальше по факту добавления комментарий находим в массиве по id нужную картинку и добавляем в её поле comments новый комментарий.

    Для ускорения работы можно сделать хэш таблицу
    { [imageId]: galleryItem } // galleryItem - объект из массива
    и тогда по id из хэш таблицы считывать картинку и добавлять комментарий - не будет поиска по массиву на каждое добавление комментария.
    Ответ написан
    Комментировать
  • Удалить свойство или сделать его значение undifened?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1) Не стоит вручную устанавливать undefined. Если значение нужно убрать - хорошая практика устанавливать null
    2) Не стоит использовать глобальные переменные без острой необходимости
    3) delete используют скорее не для обнуления значения, а для удаления свойства из объекта чтобы оно не участвовало в перечислении\не отправлялось на сервер и тд. Так что тут есть разница между delete и установкой undefined.
    Ответ написан
    Комментировать
  • Ответьте пж где учить CSS (учусь сам дома, не советуйте кого то на подобие Хауди хо)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://developer.mozilla.org/ru/docs/Learn/CSS
    https://web.dev/learn/css/
    htmlbook.ru/samcss
    Леа Веру - секреты css
    Дэвид Макфарланд - Новая большая книга css

    https://htmlacademy.ru/courses
    Ну и конечно же самостоятельная практика.
    Ответ написан
    1 комментарий
  • Как браузер выполнить наложение эти стилей в данном случае?

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

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

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

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

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

    Зачем намеренно утяжелять дерево стилей?
    Ответ написан
    7 комментариев
  • Как отслеживать смену значений в объекте?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Есть два основных варианта:
    1) Использовать get и set
    2) использовать Proxy
    Ответ написан
    Комментировать
  • Как правильно добавить стрелочку?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Смотря какую стрелочку, но, в целом, через ::after псевдоэлемент.
    Либо вставить в саму ссылку.
    Ответ написан
    2 комментария
  • Можно ли использовать киррилицу в дата аттрибутах или где нибудь еще?

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

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