[Переведено] Общие проблемы CSS в передних проектах

Оригинальный адрес:Common CSS Issues For Front-End Projects

Оригинальный автор: Ахмад Шадид

Переводчик: Чор

Краткое резюме: в последние годы рендеринг и взаимодействие между браузерами стали более согласованными. Тем не менее, это не совсем последовательно, и есть много мелочей, которые могут ввести вас в заблуждение. В дополнение к этим проблемам существуют также неопределенности, такие как разные размеры экрана, языковые предпочтения и очевидная человеческая ошибка, и мы обнаружили множество мелких проблем, которые могут привести к ошибкам разработчиков.

При реализации пользовательского интерфейса в браузере лучше всегоСведите к минимуму эти несоответствия и проблемы, чтобы пользовательский интерфейс выглядел предсказуемым. Запоминать все эти различия может быть сложно, поэтому я составил список общих проблем и решений. Используйте его в качестве удобного справочного руководства при работе над новым проектом.

Давайте начнем.

1. Сброс`button`а также`input`элемент фона

При добавлении кнопки сбросьте ее фон, иначе в разных браузерах она будет отображаться по-разному. В примерах ниже показана одна и та же кнопка в Chrome и Safari, соответственно последний будет иметь серый фон по умолчанию.

(Предварительный просмотр большого изображения)

Сброс фона решает проблему:

button {
    appearance: none;
    background: transparent;
    /* 其它样式 */
}

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наКнопки и поля ввода.

2. Overflow: `scroll`а также`auto`

Чтобы ограничить высоту элемента и позволить пользователю прокручивать его, добавьтеoverflow: scroll-y. В Chrome под macOS это выглядит хорошо, но в Chrome для Windows полоса прокрутки присутствует всегда (даже если содержимое короткое). Это потому чтоscroll-yБудет игнорировать содержимое, всегда показывать полосы прокрутки. а такжеoverflow: autoПолосы прокрутки отображаются только при необходимости.

Слева: Chrome под MacOS. Справа: Chrome для Windows (Предварительный просмотр большого изображения)

.element {
    height: 300px;
    overflow-y: auto;
}

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наoverflow-y.

3. Добавить`flex-wrap`

Чтобы элемент вел себя как гибкий контейнер, просто добавьтеdisplay: flex. Однако, если вы не добавитеflex-wrap, то при уменьшении размера экрана появится горизонтальная полоса прокрутки.

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.wrapper {
    display: flex;
}

.item {
    flex: 0 0 120px;
    height: 100px;
}

Приведенный выше пример отлично работает на большом экране. На мобильных устройствах в браузере появится горизонтальная полоса прокрутки.

Слева: появляется горизонтальная полоса прокрутки, и элементы не переносятся. Справа: элемент переносится и отображается в две строки. (Предварительный просмотр большого изображения)

Решение простое. Обертка должна оборачивать элементы, когда места не хватает.

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наflex-wrap.

4. Не используйте, когда количество гибких элементов варьируется`justify-content: space-between`

Нанесите на эластичный контейнерjustify-content: space-between, он выделяет пространство для элементов так, чтобы они были равноудалены друг от друга. В нашем примере у нас есть 8 элементов карт, что выглядит нормально. Что делать, если по какой-то причине количество элементов равно 7? Элементы во второй строке будут выглядеть иначе, чем в первой строке.

обертка с 8 предметами (Предварительный просмотр большого изображения)

обертка из 7 предметов (Предварительный просмотр большого изображения)

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наflex-wrap.

В этом случае использование CSS Grid будет более подходящим.

5. Длинные слова и ссылки

При просмотре статей на экране мобильного устройства длинное слово или встроенная ссылка могут привести к появлению на странице горизонтальной полосы прокрутки. с помощью CSSword-breakЭту проблему можно предотвратить.

(Предварительный просмотр большого изображения)

.article-content p {
    word-break: break-all;
}

(Предварительный просмотр большого изображения)

Подробнее см. CSS-трюки..

6. Прозрачный градиент

При добавлении градиента с прозрачными начальной и конечной точками в Safari он становится черным как смоль. Это потому, что Safari не распознает ключевые словаtransparent. используяrgba(0, 0, 0, 0)Чтобы заменить его, мы можем добиться желаемого эффекта. Обратите внимание на скриншот ниже:

Верх: Хром 70. Внизу: Сафари 12(Предварительный просмотр большого изображения)

.section-hero {
    background: linear-gradient(transparent, #d7e0ef), #527ee0;
    /* 其它样式 */
}

следует заменить на:

.section-hero {
    background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
    /* 其它样式 */
}

7. О макете сетки CSS`auto-fit`а также`auto-fill`непонимание разницы

В макете сетки CSSrepeatФункции для создания адаптивных макетов столбцов без использования медиа-запросов. Для этого вы можете использоватьauto-fillилиauto-fit.

.wrapper {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

(Предварительный просмотр большого изображения)

вкратце,auto-fillрасположит их, не увеличивая ширину столбца, аauto-fitСвернут его ширину до 0, когда есть пустые столбцы. Сара Суаидан писалхорошая статьяобсуждали этот вопрос.

8. Фиксируйте элементы в верхней части экрана, когда высота области просмотра недостаточна.

Что произойдет, если вы привяжете элемент к верхней части экрана, когда область просмотра недостаточно высока? Просто: он займет место на экране и в конечном итоге превратится в небольшую неудобную вертикальную область для навигации пользователей по сайту, что повлияет на их опыт.

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /* 其它样式 */
    }
}

В вышеупомянутом коде мы заставляем браузер исправить верхнюю часть только тогда, когда высота ViewStort равна или больше 500 пикселей.

Еще один важный момент: используйтеposition: sticky, если не указаноtopсвойство, иначе оно не вступит в силу.

(Предварительный просмотр большого изображения)

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наВертикальные медиа-запросы: фиксированный верх.

9. Настройка для фотографий`max-width`

При добавлении изображения определитеmax-width: 100%, поэтому размер изображения изменится, когда экран станет меньше. В противном случае браузер отобразит горизонтальную полосу прокрутки.

img {
    max-width: 100%;
}

10. Используйте определения сетки CSS`main`а также`aside`элемент

CSS Grid можно использовать для определенияmainчасть иasideраздел, который отлично подходит для сеток CSS. Проблема в том, что даже еслиasideпуст, его высота будет такой же, какmainвысоты равны.

Чтобы исправить это, пустьasideЭлемент выравнивается по начальной точке своего родителя, чтобы его высота не увеличивалась.

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-gap: 20px;
}

// align-self 将会让 aside 元素与其父元素的起点对齐。
aside {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;
}

main {
    grid-column: 4 / 13;
}

(Предварительный просмотр большого изображения)

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наглавный и побочный.

11. Добавьте в SVG`fill`

При использовании SVG, если вы добавите внутри SVGfill, иногда это может работать не так, как ожидалось. Чтобы это исправить, либо удалите собственный SVGfillсвойство или переопределитьfill: color.

Например:

.some-icon {
    fill: #137cbf;
}

Этот код не будет работать, если SVG имеет встроенную заливку. следует заменить на:

.some-icon path {
    fill: #137cbf;
}

12. Используйте псевдоэлементы

Всякий раз, когда мне нравится использовать псевдоэлементы. Псевдоэлементы дают нам возможность создавать поддельные элементы, в основном для украшения, не добавляя их в HTML.

При их использовании разработчики могут забыть сделать следующее:

Добавить кcontent: ""Атрибуты,
в неопределенномdisplayсвойства без их установкиwidthа такжеheight

В приведенном ниже примере у нас есть заголовок, разметка которого является псевдоэлементом. необходимо добавить к элементуcontent: ""Свойство, но и установить егоdisplay: inline-block,так чтоwidthа такжеheightРаботает как положено.

(Предварительный просмотр большого изображения)

13. Использование`display: inline-block`странный разрыв

набор для двух и более элементовdisplay: inline-blockилиdisplay: inline, вызовет крошечный зазор между ними. Причина в том, что браузеры интерпретируют элементы как слова, добавляя пробел в один символ между каждым элементом.

В приведенном ниже примере справа от каждого элемента есть8px, но использоватьdisplay: inline-blockи образовавшиеся небольшие пустоты сделают его12px, а это не то, что мы хотим.

li:not(:last-child) {
    margin-right: 8px;
}

(Предварительный просмотр большого изображения)

Установите его в родительский элементfont-size: 0Эту проблему можно решить просто.

ul {
    font-size: 0;
}

li {
    font-size: 16px; /* 应该在这里重新设置字体大小，因为它会从父元素继承 `font-size: 0`。*/
}

(Предварительный просмотр большого изображения)

Посмотреть Ахмад Шадид (@shadeed)существуетCodepenкод наВстроенные блочные пустоты.

14. При назначении элемента метки в поле ввода добавьте`for="ID"`

При использовании элементов формы убедитесь, что всеlabelЭлементам присваивается идентификатор. Это улучшит их доступность, а при нажатии соответствующее поле ввода получит фокус.

<label for="emailAddress">Email address:</label>
<input type="email" id="emailAddress">

(Предварительный просмотр большого изображения)

15. Шрифты для интерактивных HTML-элементов не действуют

При установке шрифта для всего документа шрифт не применяется к таким вещам, какinput,button selectа такжеtextareaна эти элементы. По умолчанию они не наследуют шрифт документа, поскольку браузер применяет к ним системный шрифт.

Чтобы исправить это, установите свойства шрифта напрямую:

input, button, select, textarea {
    font-family: your-awesome-font-name;
}

16. Горизонтальная полоса прокрутки

Ширина некоторых элементов может привести к появлению горизонтальной полосы прокрутки.

Самый простой способ найти источник проблемы — использовать схему CSS. Эдди Османи написала удобныйсценарий. Добавьте его в консоль браузера, и отобразятся контуры всех элементов на странице.

[].forEach.call(?("*"), function(a) {
    a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

(Предварительный просмотр большого изображения)

17. Сжимайте или растягивайте изображения

При изменении размера изображения с помощью CSS, если соотношение сторон изображения по ширине и высоте непоследовательно, изображение сжимается или растягивается.

Решение простое: используйте CSSobject-fit. Его функции и установка фонового изображенияbackground-size: coverаналогичный.

img {
    object-fit: cover;
}

(Предварительный просмотр большого изображения)

object-fitЭто не сто попыток. Некоторые изображения должны отображаться без обрезки или изменения размера, а некоторые платформы заставляют пользователей обрезать или загружать изображения определенных размеров. Например, Dribbble указывает размер миниатюры загрузки 800 x 600 пикселей.

18. Для`input`добавить правильный`type`

дляinputиспользовать правильныйtype. Это улучшит пользовательский опыт на мобильных устройствах и сделает его более доступным для пользователей.

Вот часть HTML:

<form action="">
    <p>
        <label for="name">Full name</label>
        <input type="text" id="name">
    </p>
    <p>
        <label for="email">Email</label>
        <input type="email" id="email">
    </p>
    <p>
        <label for="phone">Phone</label>
        <input type="tel" id="phone">
    </p>
</form>

Когда каждое поле ввода получает фокус отдельно, это выглядит так:

(Предварительный просмотр большого изображения)

19. Мобильный номер в RTL-раскладке

В макете справа налево добавьте что-то вроде+ 972-123555777, знак плюс будет в конце числа. Чтобы это исправить, направление мобильного номера можно перенаправить.

p {
    direction: ltr;
}

(Предварительный просмотр большого изображения)

В заключение

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

Часто ли вы сталкиваетесь с проблемами при работе с CSS? Добро пожаловать, чтобы поделиться в области комментариев!

1. Сбросbuttonа такжеinputэлемент фона

2. Overflow: scrollа такжеauto

3. Добавитьflex-wrap

4. Не используйте, когда количество гибких элементов варьируетсяjustify-content: space-between

5. Длинные слова и ссылки

6. Прозрачный градиент

7. О макете сетки CSSauto-fitа такжеauto-fillнепонимание разницы

8. Фиксируйте элементы в верхней части экрана, когда высота области просмотра недостаточна.

9. Настройка для фотографийmax-width

10. Используйте определения сетки CSSmainа такжеasideэлемент

11. Добавьте в SVGfill

12. Используйте псевдоэлементы

13. Использованиеdisplay: inline-blockстранный разрыв

14. При назначении элемента метки в поле ввода добавьтеfor="ID"

15. Шрифты для интерактивных HTML-элементов не действуют

16. Горизонтальная полоса прокрутки

17. Сжимайте или растягивайте изображения

18. Дляinputдобавить правильныйtype

19. Мобильный номер в RTL-раскладке

В заключение

1. Сброс`button`а также`input`элемент фона

2. Overflow: `scroll`а также`auto`

3. Добавить`flex-wrap`

4. Не используйте, когда количество гибких элементов варьируется`justify-content: space-between`

7. О макете сетки CSS`auto-fit`а также`auto-fill`непонимание разницы

9. Настройка для фотографий`max-width`

10. Используйте определения сетки CSS`main`а также`aside`элемент

11. Добавьте в SVG`fill`

13. Использование`display: inline-block`странный разрыв

14. При назначении элемента метки в поле ввода добавьте`for="ID"`

18. Для`input`добавить правильный`type`