Слияние кода завершено, страница обновится автоматически
Вы вносите изменения в AMP Runtime или добавляете/изменяете AMP расширения? Если да, то вам обязательно следует прочитать этот документ.
Вы пишете решения на основе библиотеки amp (ampstart/ABE)? Этот документ может быть полезен для вас.
Селектор — это то, что может идентифицировать/выбирать элемент или группу элементов и применять список свойств ко всем выбранным элементам.
*
.favorite
ul#summer-drinks li.favorite
html body div#pagewrap ul#summer-drinks li.favorite
html > body div#pagewrap ul#summer-drinks > li.favorite
.ampstart-dropcap:first-letter
#summer-drinks::before
#summer-drinks::after
Селектор может содержать класс, id, псевдоэлементы, псевдоклассы, :not(), а также любую их комбинацию. Для полного списка всех CSS-селекторов см. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors. В общем, порядок CSS-селекторов не влияет на то, какие правила применяются к вашему CSS, если только селекторы не имеют одинаковой специфичности и не применяются к общему элементу. Хорошо написанный CSS будет работать идеально даже при перестановке селекторов (например, при перестановке импортов в файле CSS). В реальном мире достичь этого сложно, особенно когда мы импортируем CSS сторонних разработчиков (который может изменяться в любое время).
Это немного сложнее, чем создание нового селектора (с полностью новыми свойствами).
AMP — это версионная библиотека, используемая многими веб-сайтами. Вы можете задаться вопросом: "Но я изменяю только CSS, как это может сломать AMP?". Да, это может! Все, что требуется для нарушения обратной совместимости, — это замена селектора другим селектором с более высокой специфичностью.1. Не изменяйте специфичность селектора, если это возможно.
2. Если добавляется новое свойство (например, font-size: 12px;), это допустимо добавить новый селектор.
3. Если существующее свойство перемещается между существующими селекторами, убедитесь, что свойства всегда перемещаются с высокой специфичности на низкую.
4. НЕ МОЖЕТЕ перемещать свойства в селектор с высокой специфичностью ни при каких обстоятельствах! Это является разрушающим изменением.
5. Помните, что есть два типа свойств:
- Переопределяемые
- Непереопределяемые: те, которые окончены !important
- Эти свойства легко могут быть перемещены. Однако будьте осторожны, когда вы добавляете !important к существующему свойству, потому что это всегда будет нарушать обратную совместимость (но может исправить проблемы).
- Всегда добавляйте !important во время первой попытки и планируйте это на этапе дизайна или ранней фазы реализации.
При создании расширений вы всегда должны быть в курсе вещей, которые могут вызвать FOUC (Flash Of Unstyled Content). Это происходит, когда (если) расширение строится очень поздно, и CSS расширения зависит от изменений структуры DOM (добавление класса или тега или, возможно, перестройка самого DOM).Хотя полностью избежать этого невозможно, лучше всего писать селекторы, независимые от результатов сборки. Это гарантирует, что не будет перерисовок (по крайней мере, в начальном состоянии).Один из способов избежать перестроек после сборки — разделить все CSS-свойства на in и out свойства. "In" стили маловероятно вызовут FOUC или вообще не вызовут. "Out" стили могут вызвать FOUC, и мы должны, вероятно, запретить их. Хорошим примером является изменение отступов (padding) по сравнению с отступами (margin) элемента. Изменение отступов во время сборки вполне допустимо, но изменение отступов — огромное "нет".
Вот несколько примеров того, что НЕ следует делать, используя реальные примеры.
Вот пример плохого селектора CSS:
amp-selector:not([disabled]) [option][selected]:not([disabled]) {
outline: solid 1px rgba(0, 0, 0, 0.7);
}
Почему это плохой?
Единственное хорошее в этом CSS — то, что он полностью избегает FOUC, целенаправленно выбирая теги и атрибуты, а не завися от результатов сборки.Улучшение CSS
Вот как мы изменили этот CSS, чтобы сделать его лучше:
amp-selector [option][selected] {
outline: solid 1px rgba(0, 0, 0, 0.7);
}
amp-selector [selected][disabled],
amp-selector[disabled] [selected] {
outline: none;
}
Исправление PR: https://github.com/ampproject/amphtml/commit/e12deb125bc0bed16d33481e0c
- .i-amphtml-accordion-header {
- cursor: pointer;
- background-color: #efefef;
- padding-right: 20px;
- border: solid 1px #dfdfdf;
- }
+ amp-accordion > section > :first-child {
+ cursor: pointer;
+ background-color: #efefef;
+ padding-right: 20px;
+ border: solid 1px #dfdfdf;
+}
Урок, извлеченный из этого случая, заключается в том, что даже если изменение CSS было хорошим (оно исправило FOUC из-за введенного класса на этапе BUILD), оно переместило свойства из селектора с НИЖЕЙШЕЙ специфичностью к ВЫШЕЙШЕЙ, что нарушает обратную совместимость.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )