Мне не очень нравятся майонез, сметана и кусты акации.
Местоположение
Россия, Москва и Московская обл., Москва

Достижения

Все достижения (18)

Наибольший вклад в теги

Все теги (51)

Лучшие ответы пользователя

Все ответы (286)
  • Когда использовать jpg а когда png?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    Типичные примеры использования:

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

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

    GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

    SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

    P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

    P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».
    Ответ написан
    22 комментария
  • Как сделать анимацию логотипа?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Что первое, что второе, по описанию, требуют WebGL. Второй вариант проще и легче в плане кода будет: статичная сфера с текстурой + текст, который описывает движение по её орбите.

    Можно на CSS сделать достаточно убогую бесконечную прокрутку карты, но она не будет учитывать геометрию шара.

    Типа так:


    UPDATE. Увидел такой баг в Android Chrome в результате совместной работы border-radius и overflow:
    5d694ce0ed71b148762968.png
    Нашел решение хаком. Нужно добавить следующее к такому блоку:
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */


    Это исправило проблему, обновил песочницу.
    Ответ написан
    3 комментария
  • Возможно ли запретить прокрутку в iOS Safari с сохранением текущего положения?

    SmthTo
    @SmthTo Автор вопроса, куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.

    В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed, засим, может поломать transform.

    Вот такие inline-стили для body от работы данного метода на Kinopoisk:
    top: -345px;
    left: 0px;
    right: 0px;
    position: fixed;

    Проверил у себя на устройствах: работает в iOS Safari 11 и 12. Иных путей решения данной проблемы найти не удалось.

    Update. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:
    // 1. Фиксация <body>
    function bodyFixPosition() {
    
      setTimeout( function() {
      /* Ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) */
    
        if ( !document.body.hasAttribute('data-body-scroll-fix') ) {
    
          // Получаем позицию прокрутки
          let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    
          // Ставим нужные стили
          document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
          document.body.style.overflow = 'hidden';
          document.body.style.position = 'fixed';
          document.body.style.top = '-' + scrollPosition + 'px';
          document.body.style.left = '0';
          document.body.style.width = '100%';
    
        }
    
      }, 15 ); /* Можно задержку ещё меньше, но у меня работало хорошо именно с этим значением на всех устройствах и браузерах */
    
    }
    
    // 2. Расфиксация <body>
    function bodyUnfixPosition() {
    
      if ( document.body.hasAttribute('data-body-scroll-fix') ) {
    
        // Получаем позицию прокрутки из атрибута
        let scrollPosition = document.body.getAttribute('data-body-scroll-fix');
    
        // Удаляем атрибут
        document.body.removeAttribute('data-body-scroll-fix');
    
        // Удаляем ненужные стили
        document.body.style.overflow = '';
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.left = '';
        document.body.style.width = '';
    
        // Прокручиваем страницу на полученное из атрибута значение
        window.scroll(0, scrollPosition);
    
      }
    
    }


    Для Bootstrap'овских модальных окон можно сделать универсальный вызов этих функций при их открытии и закрытии:

    $(document).on('shown.bs.modal', function () { // открытие любого модального окна Bootstrap
      bodyFixPosition();
    })
    
    $(document).on('hidden.bs.modal', function () { // закрытие любого модального окна Bootstrap
      bodyUnfixPosition();
    })
    Ответ написан
    3 комментария
  • Как все изображения товаров сделать квадратными?

    SmthTo
    @SmthTo
    Все перепёлки мира будут оплакивать мою смерть.
    Можно через CSS сделать. Решение работает, начиная с древнего IE11 (т. к. без object-fit). Плюс, картинки не будут подвержены лишней обработке на сервере. Код включает в себя всевозможные хаки для разных браузеров.

    Оно не зависит ни от соотношения сторон самой картинки, ни от ширины контейнера (можно делать адаптивно без px, как в моем примере) + поддержка браузерами, можно сказать, максимальная + место под картинку не скачет, пока картинка грузится (lazyload оценит):

    Ответ написан
    4 комментария
  • Как реализовать чёрточки между символами в input?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.


    Нужно четко в таком варианте определить размеры, четко определить шрифт и т. п. — чтобы не скакало. Ну и ограничить длину ввода в полях через JS.

    UPDATE №1. Шрифт должен быть моноширинным.

    UPDATE №2. Есть проблема из-за letter-spacing у последнего символа в input'е (появляется прокрутка). Хак с отрицательным margin на ширину letter-spacing тут не сработает. Я знаю только один вариант исправления этого — div как обертка и блок внутри с тем самым хаком и contenteditable. Т. е. нужно будет настраивать JS для получения данных отсюда. Вот тут это все есть + есть простой скрипт для ограничения вводимых в область символов, чтобы понять идею:

    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (7)