Задать вопрос

leeroyjenkins176

Лайки

  • Как скруглить низ изображения?

    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 комментарий
    1 комментарий

  • Как правильно указать мультиязычные страницы для google?

    vpetrov
    @vpetrov
    частный SEO-специалист, textarget.ru
    Речь идёт о метаданных. Поисковая система должна понимать, что у страницы есть версия на другом языке, для этого и нужна ссылка на альтернативную версию с заполненным 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 комментария
    2 комментария

  • Как адаптировать такие блоки под ретина дисплеи?

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

  • Почему не отменяется заливка при автозаполнении?

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