Ошибки CSS на автопилоте | DevsDay.ru

IT-блоги Ошибки CSS на автопилоте

WebForMySelf 16 сентября 2020 г. Андрей


Ошибки CSS на автопилоте

От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их изначально нашли.

Я спросил в Твиттере о самых забавных ошибках, которые может совершить фронтенд-разработчик, и получил несколько забавных ответов.

В этой статье я рассмотрю некоторые из наиболее распространенных и забавных ошибок CSS, которые мы совершаем на автопилоте.

Ошибки, которые делаю я

Размер шрифта

Перепутать между font-size и font-weight — обычное дело. Вот ошибка, которую я совершаю слишком часто.

.title {
    font-size: bold;
}

Непрозрачность

Я точно не знаю причину, но иногда я забываю указать процентное значение непрозрачности.

.title {
    opacity: 50;
}

Еще одна распространенная проблема — это неправильный ввод opacity объекта.

.title {
    /* Это непросто заметить */
    opaciy: 0.5;
}

Толщина шрифта

Это light или lighter?

.title {
    font-weight: light;
}

Отступы

Это может произойти, когда вы думаете, что свойство padding, а на самом деле это padding-top.

.section {
    padding-top: 10px 20px;
}

CSS-Сетка

Иногда я ввожу grid-column вместо grid-template-columns.

.section {
    grid-columns: 1fr 1fr 1fr;
}

Переменные CSS

Не знаю почему, но я обнаружил, что мне лень писать var(—brand-color) вместо этого.

.title {
    color: --brand-color;
}

box-shadow

Я всегда забываю, что box-shadow нужно сбросить с помощью none.

.title {
    /* Invalid */
    box-shadow: 0;
}

От сообщества

visibility

.title {
    visibility: none;
}

Ширина

Я не могу сосчитать, сколько раз делал это, и об этом напоминает мне Sublime Text.

.title {
    widows: 100px;
}

Свойства смещения

Возникает странное ощущение отказа от единиц измерения свойств смещения CSS для позиционированного элемента.

.elem {
    left: 14;
}

CSS Calc()

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

.elem {
    font-size: clac(14px + 1vw);
}

Цвет CSS

Я помню, как столкнулся с такой ошибкой. Может быть, это результат использования red, чтобы быстро что-то показать?

.elem {
    color: #red;
}

display

.title {
    display: absolute;
}

Преобразования

.title {
    translate: (-50%, -50%)
}

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.

Источник: WebForMySelf

CSS 3 css

Читайте также


Пользовательские стили элементов select на CSS

Разработка WebForMySelf 24 сентября 2020 г. 6:53
От автора: современный CSS предоставляет нам ряд свойств для создания пользовательских стилей элемента select, которые имеют почти идентичный начальный вид для одиночных, множественных и отключенных элементов select в популярных браузерах. Несколько...... читать далее
CSS 3 css

UX & UI Portfolio Website for Free

Дизайн UX Planet 22 сентября 2020 г. 21:42
with Axure prototype and GitHub magicContent:- Guide- Personal Experience- Alternatives & ReferencesFull step-by-step GuideMaterials: Resume and the best Works you have. Soft: Axure RP 9 [https://www.axure.com/download]If you don’t own Axure lice...... читать далее
github-pages website axure prototyping portfolio

Разработка WebForMySelf 22 сентября 2020 г. 6:33

От автора: хотя мне нравится Vue.js 2, есть некоторые ограничения на то, как можно применять повторно используемые компоненты и как должен быть написан код. Это было одновременно и благословением, и проклятием. С одной стороны, для простых компоненто...... читать далее

VueJS vuejs

Разработка techrocks.ru 21 сентября 2020 г. 19:55

Давайте рассмотрим различия между grid и flexbox. Разбирать будем конкретные случаи использования (с примерами кода). Запись Grid — для макетов, Flexbox — для компонентов впервые появилась Techrocks.... читать далее

Обучение primary

DevOps linuxhint.com 21 сентября 2020 г. 6:42

The Laravel service container allows the user to initiate classes by alias. The way to access the Laravel service container is called a facade. This tutorial shows how to create and use Laravel built-in facades.... читать далее

laravel

Разработка techrocks.ru 18 сентября 2020 г. 19:18

В этой статье я перечислю десять вещей из HTML5, которыми сам раньше не пользовался, но сейчас думаю, что они весьма полезны. Запись 10 полезных особенностей HTML5, которыми вы, возможно, не пользуетесь впервые появилась Techrocks.... читать далее

Обучение primary

Разработка DZone Web Dev 18 сентября 2020 г. 17:43

Ionic is an open source framework designed to build native-like mobile web applications which target the major mobile operating systems. Targeting different systems with the same codebase speeds up the development process while reducing the time to m...... читать далее

javascript mobile security tutorial application security ionic cordova jscrambler

Популярные темы

ux (288) design (245) новости (240) новость (175) web dev (158) devops (151) ux-design (149) security (144) ubuntu (142) javascript (141) headline (114) tutorial (106) python (106) ui (98) статьи (93) user-experience (84) api5 (76) seo (76) testing roundup (73) java (71) игровые проекты (70) дизайн (69) software testing (68) programming (68) primary (63) product-design (62) design-thinking (61) ui-design (57) windows 10 (54) laravel (54) uncategorized (52) прочее (51) google (51) español (49) working in tech (47) турбо-страницы (47) работа (44) навыки алисы (43) обучение (43) web design and applications (42) бизнес (42) technology (42) движки и конструкторы игр (40) дайджесты вакансий от new.hr (40) covid-19 (40) case-study (40) publication (39) wp (38) мероприятия (38) технологии (37) тестирование (36) vue.js (36) aspnet (36) полезное (36) css (36) hardware (36) debian (35) networking (35) kali linux (35) docker (35) machine learning (35) инструкции (34) home page stories (34) навыки (33) powershell (33) google ads (33) web (33) angular (32) android (32) windows (31) wordpress (31) art (31) ux-research (31) алиса (31) .net (31) linux mint (30) inspiration (30) интервью с экспертами (30) apple (29) creativity (29) data (29) без рубрики (28) c# (28) dotnet (28) cloud (28) api4live (27) api (27) tutorials (27) chrome (27) user-research (27) ios (27) web-design (26) job hunting (26) события (26) linux (26) автоматизация (26) kubernetes (25) vmware (25) школа алисы (25) tools (25)