Ответы пользователя по тегу HTML
  • Почему заливка картинки больше самой заливки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    как решить?

    .img img {
        display: block;
    }

    Всё это нужно для затемнения фотографии

    Можно рассмотреть еще вариант без отдельного элемента с фоном:
    img {
        filter: brightness(0.6);
    }
    Ответ написан
    Комментировать
  • Как через css сделать такие блики на bk сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Формально можно взять фильтр blur с большим радиусом и размыть абсолютно расположенные на фоне элементы. В SVG есть аналогичный фильтр. Но лучше так не делать. Для таких размытий используется вычислительно сложный алгоритм и можно существенно увеличить нагрузку на устройства пользователей на ровном месте. Это просто сложно рендерить в реальном времени.

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

    Есть, конечно, еще более развитый вариант - взять canvas, отрендерить эту штуку на нем один раз в фоновом режиме, а потом использовать результат как картинку. Так оно не будет требовать загрузки картинки по сети, и мы не будем грузить устройства пользователей постоянно. Но это уже другой вопрос, про другие инструменты.

    P.S.: Добавлю еще такой момент, что при использовании картинки может возникнуть такая мысль, что в CSS есть еще градиенты - и это ведь тоже как картинки, может быть их использовать? Но собрать такое из градиентов гораздо сложнее, чем кажется. Сложение полупрозрачных градиентов - это не тот же алгоритм, что размытие. При взаимном наложении клякс друг на друга результат будет отличаться. Чтобы иметь такое же красивое размытие - придется иметь много градиентов, что сведет на нет саму идею снижения нагрузки на железо через них.
    Ответ написан
    Комментировать
  • Обработка тайлов на SVG. Видны прорези между ними, что делать?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это похоже на известную проблему с рендерингом разных штук в браузерах. Тут два связанных момента - с одной стороны есть вопрос подгонки размеров элементов под пиксельную сетку на экране, и потенциальные ошибки с округлениями значений и "дырками" или "нахлестами" в 1px между сущностями на экране, а с другой - собственно сглаживание, когда у нас появляются промежуточные цвета, смягчающие переходы от одних к другим. Иногда, как в таких ситуациях, мы можем воспринимать их как неуместные.

    С размерами мы еще можем попытаться что-то сделать. Например распространенный костыль состоит в том, чтобы по возможности иметь размеры элементов в целом количестве пикселей. Т.е. не давать браузеру округлять на свой вкус. А вот сглаживание мы не можем выключить просто так. Вы нашли атрибут shape-rendering, но если внимательно почитать в стандарте, что он предполагает, то там будут исключительно рекомендательные высказывания:

    the user agent might turn off anti-aliasing


    или

    might adjust line positions and line widths to align edges with device pixels


    Но "might" не означает "must". На практике сглаживание или не отключается полностью, или отключается, но границы по пикселям смещаются так, что становится еще хуже, чем было, или еще какая фигня происходит. В разных браузерах все по-разному и поведение немного меняется со временем, так что старые костыли могут переставать работать. В CSS есть свойства, связанные со словом rendering, и они такие же мутные в своих формулировках.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В таких вопросах хорошо показывать код, а не скриншоты, но в общем случае если нам нужно вписать что-то очень большое на фон и сделать так, чтобы оно вылезало за края экрана, но не вызывало скролла нигде, то этой большой штуке делается контейнер с overflow: hidden. Внутри контейнера она может вылезать куда угодно, это уже не будет влиять на размер страницы в целом.
    Ответ написан
    3 комментария
  • Как распределить элементы на адаптивной, векторной кривой?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у path в SVG есть методы getTotalLength и getPointAtLength, а из них можно сообразить себе утилиту для расположения кружков вдоль кривой в удобных единицах измерения. Это не так здорово, как на CSS, но тем не менее:

    function putCircleOnPath(path, circle, percent) {
        const length = path.getTotalLength();
        const point = path.getPointAtLength(length * percent / 100);
    
        circle.setAttribute('cx', point.x);
        circle.setAttribute('cy', point.y);
    }


    Получится что-то такое:

    Ответ написан
    2 комментария
  • Какие могут быть подводные камни при верстке в REM c шрифтом HTML в VW?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Классическая реализация этого подхода предполагает, что есть CSS шлюз, ограничивающий минимальный/максимальный размер шрифта для минимального/максимального размера экрана, и логика дизайна явно завязана на размер шрифта. Как в мире, где люди печатают разные штуки на бумаге. Плюс альтернативные единицы измерения - vw, vmax, проценты - если нужно. Это помогает сохранить в верстке логику дизайна в явном виде. Используя искусственную логику 1rem = 10px, и rem не в значении "базовый размер шрифта", а просто как костыль для адаптивности, вы упрощаете изначальные подсчеты, но в верстке получается гора рандомных дробных значений, которые не пойми что обозначают. Тут нужно либо подгонять все под 10px сетку, что не всегда уместно, либо по мере усложнения интерфейса это все превратится в такую кашу, что врагу не пожелаешь. Собственно это возвращает нас к изначальной проблеме верстки в пикселях. Куча магических значений и никакой логики в коде. Это главный недостаток вашего способа приготовления rem.

    Вторая проблема, более общая - округление значений. При изменении размера экрана будут появляться дробные размеры всего. Они будут округляться до целого количества пикселей. При этом у нас есть много ситуаций, когда разные браузеры будут округлять по-разному, или просто не туда, куда мы ожидаем. Появляются разные артефакты. В модных сайтах, где в дизайне много негативного пространства, мы можем этого не заметить, но в тесных интерфейсах кроваво-энтерпрайзных приложений это быстро станет проблемой. Там пиксели = надежность и предсказуемость.
    Ответ написан
    2 комментария
  • Микроразметка не видна - как исправить?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Такие вещи всегда лучше для начала проверять с помощью официального Schema Markup Validator + Rich Results Test от Google. Первый проверит, что все ок с синтаксисом (вне зависимости от поисковых систем), а второй - что конкретно Google может посчитать странным. В данном случае синтаксически все хорошо, но Google докапывается до отсутствующих position и говорит, что без них не будет эти данные использовать. В примере для itemListElement (во вкладке microdata) можно посмотреть, куда эти мета теги с position добавить. Вероятно вам стоит все ваши страницы прогнать через эти сервисы и посмотреть, что там еще не так.
    Ответ написан
    9 комментариев
  • Почему bottom:0 не работает?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Использование position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.

    Вероятно вы получите нужное вам поведение если будете использовать position: absolute.
    Ответ написан
    Комментировать
  • Как сделать, чтобы высота iframe была равна соотношению 16:9?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    пропорции 16:9

    Ну так:
    .whois-video {
        aspect-ratio: 16 / 9;
    }

    И да, это уже можно делать. Пора уже забыть эти хаки с padding.
    Ответ написан
    Комментировать
  • Как вивести на экран камеру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    var video = document.querySelector('video');

    У вас в body нет ни одного тега video, соответственно с помощью querySelector не находится ничего, переменная video равна null, и дальше все ломается. Добавьте тег video и все заработает.
    Ответ написан
    1 комментарий
  • Что за проблемы с наложением, бордерами в хроме в последнее время?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Этот "баг" - проблемы округления размеров элементов до целого количества пикселей. Разработчики хрома всегда имели с этим сложности. Если погуглить - у них там кучи обсуждений открыты на тему того, что размеры в разных браузерах считаются как-то слишком по-разному, и логика размеров в хроме оставляет желать лучшего. В последние месяцы и правда стало даже хуже, чем было раньше. Проблема с вот этими отступами стала появляться в старом коде, который раньше работал нормально.

    В большинстве случаев это решается размерами и расположением элементов в духе calc(100% + 0.5px). В зависимости от логики в дизайне значения меняются, но логика остается - добавляем к значениям в коде доли пикселя до тех пор, пока не начнет округляться нормально. Иногда, если там картинка, помогает font-size: 0 для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем.
    Ответ написан
    Комментировать
  • Почему не работает font awesome?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    В начале файла стилей видно, что вы подключаете Font Awesome Free 6.2.1. Иконка fa-forward в нее входит, а вот иконка fa-arrows-repeat-1 уже входит в Pro-версию, а не Free. Для ее использования вам нужно $99 в год.
    Ответ написан
    1 комментарий
  • Проблема с подключением Swipper, как устранить?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Ошибки вида

    ... MIME type (‘text/html’) is not Executable ...

    или

    ... MIME type ('text/html') is not a supported stylesheet MIME type ...

    появляются обычно или если сервер путает типы данных (маловероятно, если до подключения этих файлов все работало, хотя бывает), или если у нас неправильные пути к файлам (более вероятно). Вполне возможно, что сервер отдает 404 страницы, которые по очевидным причинам не являются стилями или скриптом, который можно выполнить. Проверьте, что по этим ссылкам вообще есть эти стили и скрипты. Скорее всего пути к файлам неверные.
    Ответ написан
    Комментировать
  • Что произошло с шрифтом?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Без кода можно только гадать, что произошло в этом конкретном случае, но на ум сразу приходит свойство font-palette из CSS. Оно уже начинает поддерживаться в современных браузерах и некоторые энтузиасты его используют.

    Ответ написан
    1 комментарий
  • Как сделать, чтобы при переносе последнего слова, вместе с ним переносилась иконка, идущая за ним?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    не влезая в плагин, уже на загруженной странице

    const table = document.querySelector('table');
    const html = table.innerHTML;
    const modifiedHtml = html.replace(/>\s+<i/g, '>&nbsp;<i');
    
    table.innerHTML = modifiedHtml;
    Ответ написан
    9 комментариев
  • Почему YouTube мешает Swiper?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?

    В том виде, в котором оно есть сейчас - нет. Проблема существует с 2013 года как минимум и будет решена примерно никогда, потому что обе стороны конфликта говорят, что проблема не на их стороне. Но можно вместо интерфейса от youtube прикрутить свой. То есть плеер оставить, но управление сделать свое, которое будет как-то сочетаться с имеющимся интерфейсом. Такой вот компромисс. Концептуально это будет выглядеть так, что мы убираем стандартный iframe, отключаем для плеера pointer-events:
    <div class='swiper' id='my-slider'>
        <div class='swiper-wrapper'>
            <div class='swiper-slide'>Slide 1</div>
            <div class='swiper-slide' id='youtube-slide'>
                <div id='player'></div>
            </div>
            <div class='swiper-slide'>Slide 3</div>
            <div class='swiper-slide'>Slide 4</div>
        </div>
    </div>
    <style>
    #player {
        pointer-events: none;
    }
    </style>

    И переходим к API на js, чтобы сформировать свой плеер, который мы будем контролировать:
    const youtubeScriptTag = document.createElement('script');
    youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(youtubeScriptTag);
    
    window.onYouTubeIframeAPIReady = () => {
        const player = new YT.Player('player', {
            videoId: 'orbr-C3gYKk',
            playerVars: {
                controls: 0
            },
            events: {
                onReady: (event) => {
                    const youtubeSlide = document.getElementById('youtube-slide');
                    let isVideoPlaying = false;
    
                    youtubeSlide.addEventListener('click', () => {
                        if (isVideoPlaying) {
                            event.target.stopVideo();
                        } else {
                            event.target.playVideo();
                        }
    
                        isVideoPlaying = !isVideoPlaying;
                    });
                }
            }
        });
    }
    
    const swiper = new Swiper('#my-slider', {});

    В playerVars можно передать всякие параметры и немного настроить внешний вид плеера (убрать лишнее). И можно все подвесить на события свайпера, чтобы запускать или останавливать видео при переходе на нужный слайд, ну или что там нужно по дизайну.

    P.S.: На CodePen метод playVideo может не работать в Chrome-подобных браузерах из-за особенностей работы песочницы, но на обычной странице все должно быть ок.
    Ответ написан
    2 комментария
  • Как вписать изображения большего размера, что бы разметка не ломалась?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    вписать изображения большего размера, что бы разметка не ломалась

    Можно что-то такое сделать:
    .inv-cell {
        position: relative;
    }
    
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    Весь вопрос тут будет скорее не в размере картинок, а в их пропорциях. Если вы привязываете саму сетку к пропорциям экрана - она 100% будет расходиться с пропорциями картинок внутри в ту или иную сторону. Если это какие-то формальные фоточки, то object-fit решит вопрос, если же это превьюшки для фильмов с текстами или еще чем-то, что нельзя отрезать - то будет вопрос по самой концепции к дизайнеру, и его нужно будет решать с ним.
    Ответ написан
    4 комментария
  • GSAP. Как изменять zIndex на определённых точках Path?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно продублировать SVG и "верхнюю" копию частично скрыть маской. Это не самое универсальное решение, но в контексте задачи может быть самым простым и надежным, т.к. не будет никакой привязки к контенту, только к структуре кривой:
    Ответ написан
  • Почему по вертикали не встает по центру блок?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Нужно чтобы форма была по центру

    Тогда может быть align-self: center; должно быть у самой формы?
    Ответ написан
    Комментировать
  • Как лучше всего сделать данную анимацю?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    svg

    В SVG есть тег animateMotion, чтобы как раз двигать элементы SVG вдоль какого-то path, в вашем случае этих пунктиров. Все более-менее популярные библиотеки для анимаций имеют такую же функциональность, но без необходимости лезть в SMIL. Например вот.

    на css такое сделать

    Поскольку пути простые, все под 90 градусов - можно и на CSS сделать все это:


    Если сравнивать варианты CSS vs SVG, то у SVG преимущество по скорости разработки, т.к. картинка уже есть, накопипастить анимаций ничего не стоит. С CSS нужно верстать и расставлять всю картинку абсолютным позиционированием. Это время. Но у CSS есть преимущество в виде адаптивности, т.к. мы можем в зависимости от размера экрана легко менять какие-то вещи, переставлять их, и нет проблемы толщины линий, которые в SVG будут так или иначе завязаны на размер SVG и могут стать слишком толстыми или тонкими (вплоть до пропадания) на разных экранах, а в CSS их можно привязать к пикселям. По производительности что то, что это, будет плюс-минус одинаково, не прям супер (много элементов анимируются одновременно), но и явно тормозить нигде не должно.
    Ответ написан
    1 комментарий