От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли.
Я спросил в Твиттере о самых забавных ошибках, которые может совершить фронтенд-разработчик, и получил несколько забавных ответов.
В этой статье я рассмотрю некоторые из наиболее распространенных и забавных ошибок CSS, которые мы совершаем на автопилоте.
Ошибки, которые делаю я
Размер шрифта
Перепутать между font-size и font-weight — обычное дело. Вот ошибка, которую я совершаю слишком часто.
CSS .title { font-size: bold;
}
| 123 | .title { font-size: bold;} |
Непрозрачность
Я точно не знаю причину, но иногда я забываю указать процентное значение непрозрачности.
CSS .title { opacity: 50;
}
| 123 | .title { opacity: 50;} |
Еще одна распространенная проблема — это неправильный ввод opacity объекта.
CSS .title { /* Это непросто заметить */ opaciy: 0.5;
}
| 1234 | .title { /* Это непросто заметить */ opaciy: 0.5;} |
Толщина шрифта
Это light или lighter?
CSS .title { font-weight: light;
}
| 123 | .title { font-weight: light;} |
Отступы
Это может произойти, когда вы думаете, что свойство padding, а на самом деле это padding-top.
CSS .section { padding-top: 10px 20px;
}
| 123 | .section { padding-top: 10px 20px;} |
CSS-Сетка
Иногда я ввожу grid-column вместо grid-template-columns.
CSS .section { grid-columns: 1fr 1fr 1fr;
}
| 123 | .section { grid-columns: 1fr 1fr 1fr;} |
Переменные CSS
Не знаю почему, но я обнаружил, что мне лень писать var(—brand-color) вместо этого.
CSS .title { color: –brand-color;
}
YouTube тестирует новый формат коротких видео
| 123 | .title { color: –brand-color;} |
box-shadow
Я всегда забываю, что box-shadow нужно сбросить с помощью none.
CSS .title { /* Invalid */ box-shadow: 0;
}
| 1234 | .title { /* Invalid */ box-shadow: 0;} |
От сообщества
visibility
CSS .title { visibility: none;
}
| 123 | .title { visibility: none;} |
Ширина
Я не могу сосчитать, сколько раз делал это, и об этом напоминает мне Sublime Text.
CSS .title { widows: 100px;
}
| 123 | .title { widows: 100px;} |
Свойства смещения
Возникает странное ощущение отказа от единиц измерения свойств смещения CSS для позиционированного элемента.
CSS .elem { left: 14;
}
CSS Calc()
Если используемый вами редактор кода не обеспечивает надлежащего выделения, вы пропустите этот.
CSS .elem { font-size: clac(14px + 1vw);
}
| 123 | .elem { font-size: clac(14px + 1vw);} |
Цвет CSS
Я помню, как столкнулся с такой ошибкой. Может быть, это результат использования red, чтобы быстро что-то показать?
CSS .elem { color: #red;
}
display
CSS .title { display: absolute;
}
| 123 | .title { display: absolute;} |
Преобразования
CSS .title { translate: (-50%, -50%)
}
| 123 | .title { translate: (-50%, -50%)} |
Автор: Ahmad Shadeed
Редакция: Команда webformyself.
Источник