DEV Community на русском
Подписаться
Двенадцать градиентов, один идентификатор — DHSeaDev
Незначительный дефект разметки включал двенадцать идентичных SVG-градиентов, каждый из которых был определен с одинаковым ID.
В результате одиннадцать из двенадцати определений градиентов не использовались, в то время как все визуальные элементы некорректно ссылались на первое определение.
Страница выглядела визуально правильно, потому что все дублирующиеся градиенты имели идентичные цветовые остановки.
Эта невидимость означала, что стандартные аудиты сайта, включая пять собственных проверок автора, не смогли обнаружить проблему.
Проблема оставалась скрытой до тех пор, пока не было изменено определение градиента, что потенциально могло повлиять на неправильный элемент или вообще ни на какой элемент.
Критическая проверка аудита на дублирующиеся ID отсутствовала, потому что раньше это никогда не вызывало видимых проблем.
Первоначальная попытка исправления, которая последовательно переименовывала ID, создала более серьезную, видимую ошибку, связав неправильные определения с ссылками.
Это упущение было предотвращено проверкой количества, которая выявила дисбаланс между определениями и ссылками.
Правильное решение заключается в ограничении области действия переименования ID отдельными блоками SVG, гарантируя, что определения соответствуют ссылкам только в пределах их собственной области.
Этот опыт подчеркивает важность аудита на дублирующиеся ID, особенно для встроенных SVG, и тщательной проверки операций поиска и замены.