Руководство по определению области видимости CSS-переменных в Angular
Самое замечательное в CSS-переменных – тот факт, что они могут применяться к псевдоклассам, таким как наведение и фокусировка. Еще одна особенность CSS-переменных, в которую мы пока не углублялись, заключается в том, что они могут применяться как на уровне документа – глобально, – так и локально, для отдельных элементах. В этом уроке мы рассмотрим некоторые плюсы и минусы глобального и локального определения области видимости переменных, а также узнаем, как применять стили к определенным элементам во время выполнения кода.
Особенности переменных уровня документа и элемента
Подобно скомпилированным расширениям CSS, таким как Sass и Less, CSS теперь использует свои собственные «чистые» переменные. Они определяются путем добавления двойного тире (–) перед именем переменной. После этого переменные CSS передаются в в функцию var() для получения доступа к ее значению. CSS-переменные объявляют в верхней части файла CSS, как показано в первом примере ниже, или на уровне правил, как это сделано во втором примере:
1) Объявление переменной на уровне документа
--main-bg-color: brown;
.background {
background-color: var(--main-bg-color);
}
2) Объявление переменной на уровне правил
.wrapper:focus {
background-color: --focus-color;
}
При использовании метода setProperty() CSSStyleDeclaration на уровне документа в TypeScript или JavaScript переменная добавляется во встроенный атрибут стиля HTML тега:
document.documentElement.style.setProperty('--focus-color', this.textcolor);
Этот метод во многом похож на объявление пользовательского свойства в псевдоклассе :root в таблице стилей:
:root {
--main-bg-color: brown;
}
В этом методе нет ничего плохого, но вам следует помнить, что такой стиль затронет все элементы, которые ссылаются на переменную —main-bg-color. Хорошей практикой в веб-разработке считается объявление переменных в максимально ограниченной области, насколько это возможно. Этот совет подпадает под старое и общепринятое правило, которое гласит, что глобальные переменные – это плохой стиль программирования. Независимо от того, согласны ли вы с этим утверждением или нет, существует немало веских причин для ограничения области действия пользовательских свойств.
Предположим, нам нужно определить атрибут — focus-color для определенного div элемента в TypeScript коде:
@ViewChild("svgImage", { static: true })
private svgImageRef: ElementRef<HTMLDivElement>;
//далее в коде
svgImageRef.nativeElement.style.setProperty('--focus-color', 'gray');
Как можно увидеть на скриншоте, в результате этого действия CSS-переменная была добавлена в инлайновый стиль элемента:
Преимущества Angular.js
Локальное объявление переменной
Возьмем, к примеру, фрагмент CSS, где объявляются две переменные цвета – одна меняет цвет фона при наведении курсора, вторая определяет оттенок рамки фокуса:
.news-image {
$hoverColor: var(--hover-color);
$focusColor: var(--focus-color);
:hover {
background-color: $hoverColor;
}
&:focus {
outline: 2px solid $focusColor;
}
}
Поскольку переменные объявлены в правиле, их область действия ограничена элементами, соответствующими указанному селектору.
Напомним, что в примере привязки стилей CSS к событиям в приложениях Angular мы использовали глобальные CSS-переменные для создания трех цветных квадратов предварительного просмотра. Теперь давайте применим ту же технику к компоненту ленты новостей, но с использованием объявлений локальных переменных, как было показано выше.
Для создания ссылки на div, содержащий новость и изображение новостей в TypeScript коде, нам нужно добавить ссылку на шаблон #svgimage в тег div:
<div class="news-image" #svgImage tabindex="0" style="background-position: center; background-size: cover" [style.backgroundColor]="backgroundColor" > <svg> ... </svg> </div>
В верхней части класса FeedComponent вы увидите тот же способ объявления переменной @input, что и в предыдущем примере, а также ссылку на div-элемент с новостями и изображениями, любезно предоставленную декоратором ввода @ViewChild:
export class FeedComponent implements AfterContentInit, OnChanges {
@Input('background-color')
backgroundColor: string = 'blue';
@Input('hover-background-color')
hoverBackgroundColor = 'cyan';
@Input('focus-border-color')
focusBorderColor = '#CCCCCC';
@ViewChild('svgImage', { static: true })
private svgImageRef: ElementRef<HTMLDivElement>
//...
}
export class FeedComponent implements AfterContentInit, OnChanges {
@Input('background-color')
backgroundColor: string = 'blue';
@Input('hover-background-color')
hoverBackgroundColor = 'cyan';
@Input('focus-border-color')
focusBorderColor = '#CCCCCC';
@ViewChild('svgImage', { static: true })
private svgImageRef: ElementRef<HTMLDivElement>
//...
}
Развертывание Angular-приложения на Netlify
Вероятно, вы заметили, что компонент ленты новостей теперь использует хуки жизненного цикла AfterContentInit и On Changes. Давайте рассмотрим их подробнее.
Инициализация переменной
Хотя вы можете получить доступ к переменной @Input в событии ngOnInit, вы не сможете ссылаться на элементы DOM до хука ngAfterContentInit. Объявление стиля CSSStyleDeclaration для svgImageRefсохраняется в частной переменной-члене класса для последующего использования. После этого для элемента svgImageRef устанавливаются цвета наведения и фокусировки:
private svgStyle: CSSStyleDeclaration;
ngAfterContentInit(): void {
this.svgStyle = this.svgImageRef.nativeElement.style;
this.svgStyle.setProperty(
'--hover-color', this.hoverBackgroundColor);
this.svgStyle.setProperty(
'--focus-color', this.focusBorderColor);
}
Обновление значений CSS-переменных
Поскольку хук жизненного цикла ngAfterContentInit устанавливает CSS-переменные при первой загрузке приложения, нам необходимо использовать другой хук для обновления входных переменных, которое происходит каждый раз, когда пользователь вводит данные в поля ввода и нажимает кнопку «Применить». Здесь нам как раз пригодится ngOnChanges: он вызывается, когда изменяется любое свойство директивы, связанное с данными, – другими словами, всякий раз, когда изменяется значение @Input переменной компонента.
В жизненном цикле приложения ngOnChanges в первый раз срабатывает на самом раннем этапе, фактически до ngOnInit(). Поэтому нет смысла обновлять CSS-цвета при первом обходе, так как модель DOM в это время еще не будет готова. Мы можем проверить, является ли обход документа первым с помощью значения свойства firstChange. Это свойство равно true, когда ngOnChanges вызывается впервые. Помимо этого, необходимо проверить саму переменную, так как каждая связанная переменная возвращается вместе с соответствующим экземпляром SimpleChanges. Вот что мы получаем для каждой из наших переменных @Input при первом выполнении ngOnChanges:
Определяем контрольные точки в Angular
Приведенный ниже код обновляет цвета наведения и фокусировки каждый раз, когда значение изменяется после первого запуска:
ngOnChanges(changes: SimpleChanges): void {
if (changes.hoverBackgroundColor
&&& !changes.hoverBackgroundColor.firstChange) {
this.svgStyle.setProperty(
'--hover-color', changes.hoverBackgroundColor.currentValue);
}
if (changes.focusBorderColor
&&& !changes.focusBorderColor.firstChange) {
this.svgStyle.setProperty(
'--Focus-color', changes.focusBorderColor.currentValue);
}
}
Демонстрацию работы этого кода можно посмотреть на stackblitz.com:
Заключение
В этом уроке мы рассмотрели метод определения области видимости CSS-переменных, а также обсудили то, как применять пользовательские свойства к определенным элементам с помощью TypeScript и JavaScript. В конечном итоге, решение о том, объявлять ли ваши CSS-переменные глобально или внутри блоков правил, остается за вами. Я лично стараюсь определять все переменные настолько локально, насколько это возможно, потому что увеличить область определения всегда можно позже.
Источник: www.internet-technologies.ru
