Автор: admin

Возникла необходимость получить размер псевдоэлемента (:after) в js коде.

Для этого есть простая возможность:

window.getComputedStyle(element, pseudoElt);

Где pseudoElt это строка с именем псевдоэлемента.

Прочитал документацию, примеры смотреть не стал, написал:

window.getComputedStyle(element, 'after');

Проверил в хроме, всё работает. И на этом закончил.

Через некоторое время, что сопутствующая функциональность не работает в Файрфоксе. Расстроился, полез смотреть. Не мог ничего понять, полез искать в сети. В том числе посмотрел примеры из доков. Всего-то, что и надо было это pseudoElt писать, так сказать полностью, вот так:

window.getComputedStyle(element, ':after');

Не хватало двоеточия перед именем псевдоэлемента. Хром же подстроился под пользователя, и понял, что я хотел. Файрфокс, как и всегда, оказался занудой.

Читайте доки внимательнее. Не пропускайте детали. Будьте аккуратнее. Проверяйте в нескольких браузерах.

Нашел в своем codepen, уж и забылось когда и зачем.

See the Pen fade loading by Sergey Kirichenko (@oknechirik) on CodePen.

Ссылки, ведущие на другие сайты, со страниц вашего сайта (внешние ссылки) можно стилизовать несколькими способами. Например, добавляя к таким ссылкам отдельный CSS-класс.

Но можно обойтись исключительно средствами CSS! Для этого используем селектор атрибута.

/* <a href="//google.com">External link 1</a> */
/* <a href="https://google.com">External link 2</a> */
/* <a href="http://some-site.example">External link 3</a> */

a[href*="//"]:not([href*="your-site-address.name"]) {
    /* any styles you want */
}

Такой селектор выберет все ссылки, в атрибуте href которых есть двойной слеш (//), за исключением страниц вашего сайта. Если же для внутренней навигации вы используете внутренние ссылки без указания протокола, то можно изменить селектор вот так:

a[href^="http"], a[href^="//"] {
    /* any styles you want */
}

See the Pen mdrGxMx by Sergey Kirichenko (@oknechirik) on CodePen.

В CSS, как это ни странно, есть свои функции. Например, функция для задания цвета rgb. Но сейчас не о ней.

CSS-функция attr

Функция attr() возвращает значение атрибута на выбранном элементе. Это позволяет нам получить значение атрибута и использовать для, например, свойства content выбранного элемента.

Вот пример.

<a href="http://example.com">Example</a>

a:after {
    content: ' (' attr(href) ')';
}

See the Pen abmLzea by Sergey Kirichenko (@oknechirik) on CodePen.