Ответы пользователя по тегу HTML
  • Как приклеивать блок DIV к верхнему и к нижнему краю одновременно используя POSITON:STICKY;?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Задача на текущий момент не решается на чистом CSS.
    Можете вот это решение попробовать, либо попробовать нагуглить что-то другое по запросу "affix sidebar".
    Ответ написан
  • Как сделать такую кнопку?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Жму руку дизайнеру, молодец, не как у всех.

    Прямо так, как на скриншоте, на чистом CSS вряд ли получится, ибо левый нижний угол строго вертикальный, а вот правый... вообще с трудом такую фигуру представляю в реальности, поэтому вариант с трансформацией средствами браузера тут отпадает.

    Изначально я не обратил внимания, что нижний край строго горизонтальный, и накидал такое как стартовую точку



    Но когда заметил - понял, что так в принципе не выйдет сделать, на CSS нельзя "зафиксировать от трансформации" две стороны сразу.

    Так что остаётся вариант с фоновой SVG-шкой, что по сути "фоновая картинка", либо вариант со вставкой этой SVG напрямую в кнопку (прям инлайном) и дальнейшие манипуляции с ней, если требуется адекватный ховер.

    Делать лень, это нетрудно :)
    Ответ написан
    2 комментария
  • Как задеплоить vite проэкт на gh-pages?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Скорее всего, не указан ключ base в конфигурации и ресурсы пытаются загрузиться с адреса username.github.io/assets/... вместо username.github.io/package-name/assets/....

    Вот тут пример того, как правильно.
    Или поможет это, или давайте ссылку на репозиторий :)
    Ответ написан
  • Почему изображение выходит за пределы родительского блока?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Есть от вопроса ощущение проблемы XY
    Но если уж решать обозначенную проблему, то два пути у вас:
    1. Убрать `height` у родительского блока
    2. Сделать внутренним элементам относительное позиционирование, а картинки внутри прибить к ним абсолютами
    Ответ написан
    Комментировать
  • Как вернуть четкость сайту, которое убивает css scale?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вы можете проспонсировать разработку экранов с плотностью пикселей 10x и вложиться в покупку таковых для пользователей вашего сайта :)

    Серьёзно, это очень простой концепт - вот есть у вас на изображении рамка шириной 1px.
    Вы говорите `transform: scale(.8)`, размер рамки какой должен быть? `0.8px`?
    Но для экрана без повышенной плотности пикселей минимальный размер пикселя - это `1`.
    Как прикажете ситуацию разруливать? Это риторический вопрос, здесь нет решений помимо озвученного в первом абзаце.

    62ad6eb6a09f6450973954.jpeg
    Ответ написан
    Комментировать
  • Дублировать контент или динамически адаптировать на js?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Критерии "лучшести" какие?
    В поддержке обычно проще и очевиднее иметь дубль с говорящим названием: `.block__text` и `.block__text-mobile`, например. Иногда, если контент отличается прям сильно и в нескольких элементах, вплоть до замены самой корневой сущности: `the-hero`, `.the-hero-mobile`, хотя это крайний случай, конечно.

    Однако каждая такая скрытая нода по-прежнему парсится браузером и участвует в построении DOM, что влияет на производительность. Если их становится "много" в относительном выражении, рассматривайте вариант динамической замены.
    Ответ написан
    Комментировать
  • На сколько могут быть длинными модификаторы в БЭМ?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    * Это не модификаторы, а элементы

    Длинными могут быть настолько, насколько это требуется, и в количестве любом, методология это не регламентирует.

    В какой-то момент вы упрётесь в то, что объём стилей блока становится невозможным для поддержки и нужно его декомпозировать на блоки поменьше.
    Если это сразу очевидно, то и декомпозировать лучше сразу.

    уменьшат мне варианты названия других основных блоков на странице


    Создавайте внутренние блоки с общим неймспейсом, в вашем случае основной компонент - `profile`, внутренние - `profile-info`, `profile-page`, и складывайте их так, чтобы связь родитель-ребёнок между блоками была очевидна.
    Ну, да, в таком случае формально вы больше не сможете создать не-дочерний блок с неймспейсом `profile`, чтобы не запутаться, но тут нет других вариантов, и выбрать надо меньшее из зол.

    С моей колокольни выбор между монстр-компонентом на тысячу строк и тремя-четырьмя поменьше вообще не стоит - однозначно следует выбирать компоненты поменьше, даже если вы оперируете только стилями.
    Если пользуетесь фреймворками и в компонентах есть ещё и какая-то логика - то тем более.
    Пересечения между такими глобальными категориями вообще не такой частый сценарий, как может показаться, да и названия всегда можно выбрать более узкие.

    Я вот здесь отвечал на похожий по смыслу вопрос - посмотрите.
    https://qna.habr.com/q/1129178#answer_2136844
    Ответ написан
    2 комментария
  • Как лучше поступать в такие моменты по bem?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Эта разметка абсолютно правильная в двух случаях:
    1) Ваши `close` и `card` действительно нигде не переиспользуются;
    2) Объём стилей блока `some-class` остаётся адекватным для восприятия.

    Соответственно, вам нужен новый блок в двух случаях: либо он переиспользуется, либо для разделения кода для простоты восприятия.

    Возьмём разметку посложнее (не надо в ней искать какого-то смысла, просто от фонаря что-то набрал для иллюстрации):
    <div class="block">
      <!-- Header -->
      <div class="block__header">
        <h2 class="block__title">Title</h2>
        <div class="block__actions">
          <button type="button" class="block__action block__action--edit">
            <span class="block__action-icon"></span>
          </button>
        </div>
      </div>
      <!-- Content -->
      <div class="block__content">
        <p>...</p>
      </div>
      <!-- Footer -->
      <div class="block__footer">
        <div class="block__about">
          <div class="block__author"></div>
          <div class="block__date"></div>
        </div>
        <div class="block__awards">
          <div class="block__award">
            <div class="block__award-inner"></div>
            <div class="block__award-tooltip">
              <div class="block__award-tooltip-content"></div>
              <button type="button" class="block__award-tooltip-close"></button>
            </div>
          </div>
        </div>
      </div>
    </div>


    Положим, что весь контент этого блока уникальный и никак не переиспользуется.
    Объём стилей `block` при такой структуре неизбежно станет некомфортным для восприятия, строк на 200-300.

    В таком случае хорошо создать внутренний блок (или несколько) просто для того, чтобы размазать сложность.
    `block-header`, `block-footer` или даже `block-footer-award`.

    Самое главное здесь организовать файловую структуру / конфигурационный файл / чем вы там ещё собираете таким образом, чтобы было очевидно, что `block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

    * И не забывать о том, что даже для таких внутренних блоков действуют те же самые правила, что и для других - вся внешняя геометрия задаётся через элементы.
    Ответ написан
    8 комментариев
  • Это эффект параллакса из одной фотографии? Как это сделано?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Подробнее об этом можно узнать здесь
    Ответ написан
    Комментировать
  • Как такое сверстать?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").

    605df09f637c9864487824.jpeg

    Идея, вкратце:
    1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
    2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
    3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
    4. Динамически рисуете SVG по вашим ключевым точкам.
      О том, какие варианты вообще есть, можно почитать на MDN, например.
      Выглядеть это будет примерно так:

      605df0b0256ca826129561.jpeg

      В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
    5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
    6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"


    Это в целом чёрная магия, можно полдня убить, но красиво :)
    Если это всё очень сложно, то просто картинкой вставьте, высоту элементов фиксируйте, и меняйте картинку для адаптивных вариантов.

    Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
    У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)
    Ответ написан
    12 комментариев
  • Как верстать с хорошими показателями Google Speed?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Здесь нет волшебной таблетки. Это комплекс факторов...
    Из главного: ленивая/отложенная загрузка всего и вся (всевозможные метрики и второстепенные скрипты / графика / компоненты, если используете фреймворки), использование современных форматов графики (webp в частности), вёрстка mobile-first (существенно снижает время на расчёт лейаута и рендер на приоритетных устройствах), инжект CriticalCSS (это про time to first paint), уменьшение размера DOM-дерева.
    Это из фронта, на бэке - сжатие gzip/brotli, максимальное время жизни кэша, оптимизация времени до ответа.

    Они же все рекомендации прямо при проверке пишут, там очень подробно всё расписано.
    Волшебной кнопки не существует.

    За 100/100 гоняться на чём-то больше стандартного лендоса - как правило бред сумасшедшего (оно обычно можно, но того совершенно не стоит, так как из-за отложенной загрузки/рендера будет страдать UX, что важнее красивой пузомерки).
    90+ для почти любого проекта - вполне несложно, если умеючи.
    А умеючи - это с опытом, анализом рекомендаций, а не поиском новых сборок/инструментов.
    Ответ написан
    2 комментария
  • Как сделать прокрутку как на сайте Apple Music?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Вот тут человек тоже вдохновился продуктами Apple и реализовал библиотеку, которая позволяет делать эти вещи просто.
    Сам пока не использовал, но на первый взгляд выглядит просто и работает.
    Ответ написан
    Комментировать
  • Как такое сверстать?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Я бы в первую очередь куда-то в эту сторону посмотрел.



    Со стрелкой правда непонятно что делать, возможно, это чуть ли не единственный случай, когда шрифтовая иконка будет оправдана, но нарисовать и скомпилировать придётся самостоятельно :)

    Если бы не хватило - полез бы смотреть в сторону SVG-клипа.
    Но в целом случай сложный, придётся заморочиться, чтобы сделать более-менее приятно глазу. :)
    Ответ написан
    Комментировать
  • Почему автоматически меняет номер телефона на сайте?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Архив смотреть лень, но по видео - вероятнее всего, это не баг, а динамический коллтрекинг.
    Много сервисов предоставляют подобные штуки, статью взял первую попавшуюся из гугла - эталонным исполнением считать не стоит. :)
    Ответ написан
    1 комментарий
  • Почему я не могу закомментировать код html?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Потому что синтаксис комментариев в HTML выглядят иначе. Вот так:
    <!-- Комментарий -->
    Ответ написан
    3 комментария
  • Есть ли вообще смысл указывать width в пикселях, если мы указываем вместе с width max-width и min-width?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Если мы ещё зададим width, то ничего не поменяется.

    Поменяется. Вы можете задать width: 200px; и он всегда будет 200px вне зависимости от размера экрана. А зададите width: 50px; - будет 100px, так как в таком случае конфликтует с min-width: 100px;.

    в разных пикселях

    Что-что? Пиксель - в вебе он и есть пиксель вне зависимости от плотности, пусть ретина-дисплеи вас не смущают.

    Вот смотрите. Есть картинка. Она должна быть на всю ширину экрана, но не более 500px, например.
    width: 100%;
    max-width: 500px;

    На экранах менее 500px ширины она будет на всю ширину, а на больших - ровно 500.

    А для max-width и min-width получается больше подходят не проценты, а пиксели.

    Пожалуй это верно, хотя поймал себя на мысли, что никогда об этом так не задумывался. И вы, кажется, усложняете там, где этого не нужно делать. Это же очень простые, интуитивно-понятные свойства. Нужно - применяете, не нужно - не применяете.
    Ответ написан
    Комментировать
  • Как сверстать карту с кривыми краями?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
    А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.
    Ответ написан
    Комментировать
  • А вы пользуетесь услугами верстальщиков? Где, как, когда?

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

    Где искать? Через знакомых, на биржах и HH - быстро найдёте, это же просто и примитивно, каждый может.
    Как разочаруетесь и если "простая и примитивная вёрстка" уже не будет означать "это же просто, значит дёшево", приходите ко мне.
    Ответ написан
    Комментировать
  • Почему body "не перекрывает" p?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Потому что в спеке отдельной графой так описано. Про специфичность.

    Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила


    Чтобы уложить в голове, нужно нарочито утрировать и посмотреть как это работает:

    Ответ написан
    1 комментарий
  • Что делать если контент-скрипт из расширения не работает так, как надо?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Выглядит так, что ваша третья строчка вызывается до того, как завершил работу обработчик из первых двух.
    Поставьте задержку в полсекунды.
    document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
    document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
    setTimeout(() => {
      console.log(document.getElementsByClassName("audio_page_player_title_performer")[0].childNodes[0].innerHTML);
    }, 500);
    Ответ написан
    1 комментарий