• Какие минусы у данного решения?

    А не надо гадать. Находите какой-то автоматический инструмент, который проверяет все эти параметры, и радуетесь. Есть куча подобных расширений для браузеров.
    Например:

    https://silktide.com/toolbar/screen-reader-simulator/

    https://chromewebstore.google.com/detail/web-disab...

    Ваша цель:
    - сделать так, чтобы устройства для слепых "screen reader" адекватно сообщали пользователю, что от него требуется.
    - чтобы контраст был адекватным, чтобы и слабовидящие могли пользоваться
    Ответ написан
    2 комментария
  • Как сделать так чтобы inline фоновая картинка была видна только в дочерних блоках?

    Aetae
    @Aetae
    Тлен
    Боль-мене универсально с помощью clip-path и трюка с позиционированием:
    Ответ написан
    Комментировать
  • Как сделать общий градиент для двух блоков?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Например так



    Для любого угла градиента

    Ответ написан
    5 комментариев
  • Как решить проблему с узкой шириной текста возле float элементов?

    Aetae
    @Aetae
    Тлен
    Накидал такую хрень, с использованием трюка с распоркой и тюка с translate:
    (потыкай в 0.5x\1x)
    Работает только если ширина контейнера известна(здесь 100vw).

    Но хз, на самом деле, наверное на js будет проще.:)
    Ответ написан
    2 комментария
  • Как скруглить низ изображения?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Накидал на скорую руку, один из вариантов:

    Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.
    Ответ написан
    Комментировать
  • Как сделать aspect-ratio на основе переменных?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Реализуемо это на css?

    Да (на css3):
    :root {
        --w: 300px;
        --h: 200px;
    }
    
    // variant one
    
    div {
        width: var(--w);
        height: var(--h);
    }
    
    div::before {
        content: "";
        display: block;
        padding-top: calc(var(--h) / var(--w) * 100vh);
    }
    
    // variant two 
    
    div::before {
        content: '';
        display: block;
        width: var(--w);
        padding-top: calc((var(--h) / var(--w)) * 100%);
    }
    Ответ написан
    1 комментарий
  • Как правильно указать мультиязычные страницы для google?

    vpetrov
    @vpetrov
    частный SEO-специалист
    Речь идёт о метаданных. Поисковая система должна понимать, что у страницы есть версия на другом языке, для этого и нужна ссылка на альтернативную версию с заполненным hreflang (язык и страна).
    Переключалка языков в интерфейсе, по идее, может быть оформлена как угодно - это чисто пользовательская интерфейсная история, не для роботов.
    Ответ написан
    Комментировать
  • Как правильно указать мультиязычные страницы для google?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Tell Google about localized versions of your page, а теперь по-русски:
    1. html lang="ru" должен быть указан и сообщать текущий язык страницы. Отдельный атрибут lang="ru" у элемента перебивает основной, указанный в html lang="ru".
    2. В head необходимо указывать мета атрибуты (ссылки) на аналогичные страницы, но на другом языке.
    3. В head необходимо указать мета атрибут (ссылку) на текущую страницу.
    4. В head необходимо указать мета атрибут (ссылку) на страницу с языком по умолчанию (hreflang="x-default"), если у пользователя в браузере установлен язык, который не обнаружен в мета атрибутах (ссылках) в head нашей страницы, обычно - это английский (стандартный). Здесь же обычно создают механизм выбора языка страницы с последующей переадресацией (если у нас такая имеется), либо перевод авто-переводчиком текущей страницы.

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

    Пример ru страницы (дефолтной):
    <html lang="ru">
    <head>
        <title>This is content ru lang (default)</title>
        <!-- link from others lang versions -->
        <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
        <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
        <!-- link from current lang versions (ru) -->
        <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
        <!-- link from not supported lang versions -->
        <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
    </head>
    <body>
        <div>This is content ru lang (default)</div>
        <div lang="en">This is content en lang</div>
    </body>
    </html>

    Пример en страницы:
    <html lang="en">
    <head>
        <title>This is content en lang</title>
        <!-- link from others lang versions -->
        <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
        <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
        <!-- link from current lang versions (en) -->
        <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
        <!-- link from not supported lang versions -->
        <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
    </head>
    <body>
        <div>This is content en lang</div>
        <div lang="ru">This is content ru lang</div>
    </body>
    </html>

    Пример страницы с не определенным языком (hreflang="x-default"), она же en версия страницы:
    <html lang="en">
    <head>
        <title>This is content en lang</title>
        <!-- link from others lang versions -->
        <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
        <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
        <!-- link from current lang versions (en) -->
        <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
        <!-- link from not supported lang versions -->
        <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
    </head>
    <body>
        <div>This is content ru lang</div>
        <div lang="ru">This is content ru lang</div>
    </body>
    </html>

    Должен ли мой переключатель языка, к примеру, быть в виде ссылок < a>, или < button> + js тоже норм (как по умолчанию в opencart)?

    Без разницы, главное, чтобы после действия был выполнен переход на другую страницу с необходимыми метатегами.

    Желательно, чтобы каждая страница сообщала свой язык, используя атрибут land в html теге:
    <html lang="ru">
    Ответ написан
    2 комментария
  • Как адаптировать такие блоки под ретина дисплеи?

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

    @mesaga1983
    I like CSS
    Переопределите стили, как указано в этой замечательной статье. Обойдетесь даже без !important.
    Вполне работает:
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 40rem #121212 inset;
    Ответ написан
    Комментировать