Выучить этот удивительный? Трюк для отладки CSS

1656626049 vyuchit etot udivitelnyj tryuk dlya otladki css

от ZAYDEK

Дизайнеры его ненавидят! ?

*Не кликбейт*

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

Привет! ? Я Зайдек! Когда я впервые решил научиться создавать веб-сайты, это было гораздо болезненнее, чем ожидалось. В конце концов, я опытный графический дизайнер и программист – как могут быть сайты?шляпа тяжело?

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

1*Czmfge5I4FvRyB4sJZD2RQ
Нажмите здесь, чтобы открыть Scrimba

Я также преподавал бесплатный курс HTML/CSS на Scrimba, где учу, как создать хороший блог с нуля. Нажмите здесь, чтобы зарегистрироваться! ?

Scrimba.com – это интерактивная интерактивная платформа, где веб-сайты записываются как события, а не видео, и их можно редактировать! ?

Что такое отладчик?

Есть замечательная цитата Дональда Кнута об отладке. Перефразируя это выглядит примерно так.

Кто-то: «Какой язык программирования самый лучший?»

Дональд Кнут: «У кого из них лучший отладчик?»

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

Итак, что мы можем сделать? Что ж, мы можем послушать дельный совет Дональда Кнута и воспользоваться отладчиком!

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

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

Возьмите следующее:

1*BMu3HJzd4RAr7VHXEonMpA
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Что мы можем сделать, чтобы увидеть структуру нашего сайта? Вот два решения, которые я знаю: мы можем создать одноразовые правила CSS, чтобы подчеркнуть элемент или мы можем использовать инструменты отладки Chrome, Firefox или Safari. Но это до сих пор более или менее одноразовое решение. Нам нужно а общий решение.

Наш отладчик

Не так давно я разрабатывал это название, и это было непросто. Цель заключалась в том, чтобы навести изображение на многострочный текст. Должно быть просто, правда?

Что ж, CSS является антагонистом? здесь. То, что иначе было бы простым в Photoshop, может быть путешествием героя в CSS, и это привело меня к эксперименту с outline:

* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }
1*t_WJXVnw_bjWhXZI8kvB9w
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Ничего особенного – только мягкие белые линии. Однако у нас есть правило, которое применяется ко всем элементам, пока мы используем an * а не имя id, classили element.

И все же введение в * { … } был для меня глубоким. Я подумал: «Где бы я этого не хотел?» Поэтому я добавил еще несколько строк и разработал более формальный отладчик:

* {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;}
1*N3174yoUIeDpy6IDjkFfkA
Нажмите здесь, чтобы открыть игровую площадку Скримбы

Намного улучшено! Здесь мы создали для нашего веб-сайта похожий на схему вид. Я был осторожен, чтобы не использовать сплошные цвета, но вместо этого выбрал мягкие цвета или цвета с альфа-каналом, чтобы вложенные элементы выглядели глубже по цвету. синий блюз и белее били. Я также добавил !important из-за пресловутых войн специфики CSS.

Иногда может показаться, что CSS соединяется с нами, так это как и когда применяется каскад. То есть «Как это так, что стили иногда применяются, а иногда нет?»

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

1*S_3XEtQfi_4W_3WPf7T7Ww
Реализация калькулятора специфичности CSS

Мать всей специфики есть !important, который заменяет все встроенные идентификаторы, классы и правила элементов. Это как Звезда Смерти по сравнению с Империей. Несмотря на то, что использование с !important в общем-то не рекомендуется, он идеально подходит для отладчика – потому что мы не будем отправлять наш веб-сайт с «включенным». Вместо этого мы используем отладчик только в дизайне и разработке нашего веб-сайта.

Чем больше я использовал отладчик, тем больше я понимал это использование *:not(path):noth(g) в качестве селектора было отдано предпочтение. Таким образом, я бы не получал лишние линии из векторной графики. Я также заметил это отключение box-shadow был чище, поскольку отладчик не нуждается в ощущении глубины.

Итак, вот окончательный отладчик:

*:not(path):not(g) {    color:                    hsla(210, 100%, 100%, 0.9) !important;    background:               hsla(210, 100%,  50%, 0.5) !important;    outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;}
1*q6ap35H37-gXdR_ENdoxVg
Нажмите здесь, чтобы открыть игровую площадку Скримбы

я думаю мы люди ненавидят то, что мы не понимаем. И CSS не исключение. Его неправильно характеризуют, потому что его неправильно понимают. Я предлагаю: думайте о CSS как о обоюдоострым мече. Его можно использовать как для создания, так и для деконструкции веб-сайтов.. Да, CSS не Photoshop, но это не означает, что он не может делать то, чего не может Photoshop. Создание собственного отладчика есть одна вещь мы может делать.

Как использовать этот отладчик?

  1. Перейдите к zaydek.github.io/debug.css
  2. Разместите закладку «Debug CSS» (исходный код здесь)
  3. Щелкните закладку, чтобы включить или отключить ?
1*-Yr09cqoVXljecLuZxclFw

Не забудьте бесплатный курс HTML/CSS на Scrimba, где я учу, как создать хороший блог с нуля. Нажмите здесь, чтобы зарегистрироваться! ?

1*Czmfge5I4FvRyB4sJZD2RQ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *