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

оригинальный:Common CSS Issues For Front-End Projects
автор:Ahmad Shadeed время выдачи: 27 декабря 2018 г.
переводчик: Слушайте дождь в западном зданиивремя выдачи: 2019/01/01 (Пожалуйста, укажите источник)

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

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

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

1. Сбросить фон кнопок и элементов ввода

When adding a button, reset its background, or else it will look different across browsers. In the example below, the same button is shown in Chrome and in Safari. The latter adds a default gray background.

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

Resetting the background will solve this issue:

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

button {
  appearance: none;
  background: transparent;
  /* Other styles */
}

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

2. Overflow: scroll vs. auto

To limit the height of an element and allow the user to scroll within it, add overflow: scroll-y. This will look good in Chrome on macOS. However, on Chrome Windows, the scroll bar is always there (even if the content is short). This is because scroll-y will show a scroll bar regardless of the content, whereas overflow: auto will show a scroll bar only when needed.

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

(Слева: Chrome в macOS; справа: Chrome в Windows)

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

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

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

Make an element behave as a flex container simply by adding display: flex. However, when the screen size shrinks, the browser will display a horizontal scroll bar in case flex-wrap is not added.

Чтобы сделать элемент гибким контейнером, просто добавьте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;
}

The example above will work great on big screens. On mobile, the browser will show a horizontal scroll bar.

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

The solution is quite easy. The wrapper should know that when space is not available, it should wrap the items.

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

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

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

4. Не использовать, если количество элементов динамическоеjustify-content: space-between

When justify-content: space-between is applied to a flex container, it will distribute the elements and leave an equal amount of space between them. Our example has eight card items, and they look good. What if, for some reason, the number of items was seven? The second row of elements would look different than the first one.

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

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

In this case, using CSS grid would be more suitable.

На самом деле, в этом сценарии было бы более уместно использовать компоновку сетки.

5. Длинные слова и длинные цепочки

Когда статья просматривается на экране мобильного устройства, длинное слово или встроенная ссылка могут вызвать появление горизонтальной полосы прокрутки.word-break will prevent that from happening.

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

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

Check out CSS-Tricks for the details.

Подробности пожалуйстаПросмотр CSS-трюков.

6. Прозрачные цвета в градиентах

При добавлении градиента с прозрачными начальной и конечной точками в Safari он будет выглядеть черным, потому что Safari не распознает ключевое слово.transparent. By substituting it with rgba(0, 0, 0, 0), it will work as expected. Note the below screenshot:

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

.section-hero {
  background: linear-gradient(transparent, #d7e0ef), #527ee0;
  /*Other styles*/
}

This should instead be:

Это должно быть написано так:

.section-hero {
  background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0;
  /*Other styles*/
}

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

In CSS grid, the repeat function can create a responsive column layout without requiring the use of media queries. To achieve that, use either auto-fill or auto-fit.

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

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

In short, auto-fill will arrange the columns without expanding their widths, whereas auto-fit will collapse them to zero width but only if you have empty columns. Sara Soueidan has written an excellent article on the topic.

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

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

If you fix an element to the top of the screen, what happens if the viewport is not tall enough? Simple: It will take up screen space, and, as a result, the vertical area available for the user to browse the website will be small and uncomfortable, which will detract from the experience.

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

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /*other styles*/
    }
}

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

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

Also important: When you use position: sticky, это не сработает, если вы не укажетеtop property.

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

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

9. Установите картинкуmax-width

When adding an image, define max-width: 100%, so that the image resizes when the screen is small. Otherwise, the browser will show a horizontal scroll bar.

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

img {
    max-width: 100%;
}

10. Используйте макет CSS Grid для определения основных и боковых элементов

CSS grid can be used to define the main and aside sections of a layout, which is a perfect use for grid. As a result, the asideвысота секции будет равна высотеmainэлемент, даже если он пустой.

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

To fix this, align the asideэлемент к началу своего родителя, чтобы его высота не увеличивалась.

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

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

// align-self will tell the aside element to align itself with the start of its parent.
// align-self 可以告诉 aside 元素保持与其父元素对对齐。
aside {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: start;
}

main {
  grid-column: 4 / 13;
}

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

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

Sometimes, while working with SVGs, fillне будет работать должным образом, еслиfill attribute has been added inline in the SVG. To solve this, either to remove the fill attribute from the SVG itself or override fill: color.

При использовании SVG, еслиfillЕсли атрибут встроен в него, иногда нужный эффект не будет получен. Для решения этой проблемы либоfillАтрибуты удаляются из SVG либо сfill: <颜色值>покрывать.

Take this example:

Взгляните на следующий пример:

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

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

Если на SVG есть встроенная заливка, это бесполезно, надо писать так:

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

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

I love to use pseudo-elements whenever I can. They provide us with a way to create fake elements, mostly for decorative purposes, without adding them to the HTML.

Мне нравится использовать псевдоэлементы, когда это возможно. Их можно использовать для создания поддельных элементов — в большинстве случаев в качестве декоративных эффектов, не добавляя ничего в HTML.

When working with them, the author might forget to do one of the following:

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

• add the content: "" property,

  Добавить кcontent: ""Атрибуты.

• set the width and height without defining the display property for it.

  уже настроенwidthа такжеheight, но не определяет егоdisplayАтрибуты.

In the example below, we have a title with a badge as a pseudo-element. The content: "" property should be added. Also, the element should have display: inline-block set in order for the width and height to work as expected.

В приведенном ниже примере есть заголовок, а предшествующая ему разметка — псевдоэлемент. нужно добавитьcontent: ""будет эффективным; кроме того, если вы хотите, чтобы егоwidthа такжеheightДля вступления в силу вам также необходимо установитьdisplay: inline-block.

13. При использованииdisplay: inline-blockСтранность интервала между элементами, когда

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

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

In the example below, each item has a space of 8px on the right side, but the tiny space caused by using display: inline-block is making it 12px, which is not the desired result.

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

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

A simple fix for this is to set font-size: 0 on the parent element.

Простой способ исправить это — установить родительский элементfotn-sizeУстановить как0.

ul {
    font-size: 0;
}

li {
    font-size: 16px; /*The font size should be reassigned here because it will inherit `font-size: 0` from its parent.*/
    /* 这里之所以重新设置了字体大小，是它会集成父元素的字体大小 */
}

Демонстрационный адрес:код спрей.IO/какая квота/спрей...

14. Добавьте в элемент Labelfor="ID"Атрибуты

When working with form elements, make sure that all labelЭлементы имеют назначенный им идентификатор. Это сделает их более доступными, и при нажатии на них соответствующий ввод получит фокус.

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

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

15. Свойства шрифта не влияют на интерактивные элементы

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

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

To fix this, assign the font property manually:

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

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

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

Some elements will cause a horizontal scroll bar to appear, due to the width of those elements.

Некоторые элементы имеют горизонтальные полосы прокрутки из-за их ширины.

The easiest way to find the cause of this issue is to use CSS outline. Addy Osmani has shared a very handy script that can be added to the browser console to outline every element on the page.

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

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

17. Сжатие и растяжение изображения

When you resize an image in CSS, it could be compressed or stretched if the aspect ratio is not consistent with the width and height of the image.

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

Решение простое: используйте CSS’.object-fit. Its functionality is similar to that of background-size: cover for background images.

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

img {
    object-fit: cover;
}

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

использоватьobject-fitПодходит не во всех ситуациях. В некоторых местах может потребоваться, чтобы изображения были необрезанными или уменьшенными, а некоторые платформы заставят пользователей загружать изображения, соответствующие указанным размерам, например, Dribble принимает только эскизы размером 800 x 600.

18. Добавьте правильный атрибут типа к элементу ввода

Use the correct type for an input field. This will enhance the user experience in mobile browsers and make it more accessible to users.

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

Here is some HTML:

Вот кусок 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-раскладке

When adding a phone number like + 972-123555777 in a right-to-left layout, the plus symbol will be positioned at the end of the number. To fix that, reassign the direction of the phone number.

При добавлении макета справа налево, например+ 972-123555777Для таких мобильных номеров в конце номера будет стоять плюсик. Чтобы исправить это, вам нужно сбросить свойство направления числа.

p {
    direction: ltr; // left-to-right，左到右 ——译注
}