Дима Дорошев

Посты из блога по тегу css:

Spense.app "под капотом". Код.

Пока Spense v0.2 в разработке, хочу рассказать о внутренней организации приложения с технической точки зрения. Статья эта в основном для (веб-)разработчиков, и язык у нее соответствующий, поэтому если вы читаете и ничего не понимаете, все в порядке, можно просто не читать.

В двух словах

Бэкенд на Django (Python), фронтенд на Django-шаблонах и Bootstrap, с щепоткой JavaScript и местами htmx (уже нет).

Почему так скучно?

Звучит совсем не хайпово, да. Но стоит помнить, что Spense в текущем его состоянии - это не полноценный продукт. Это скорее прототип, в котором мне часто нужно что-то менять и проверять идеи. Если идеи сработают, я выкину этот код и напишу другой, а если не сработают, просто оставлю на память.

Так что Django я выбрал не потому что я ее очень люблю (на самом деле я ее ненавижу), а потому что за последний год я успел к ней привыкнуть, и прототипировать приложение мне с ней получается легко и быстро.

Читать далее
Dev

B I U

In any text processor (Microsoft Word, Google Docs, LibreOffice), the "bold", "italic", and "underline" buttons are located next to each other:

For decades, the pattern has been established in our minds that these are properties of the same order. If you want to make bold and italic text, you press two buttons next to each other:

If you want bold and underlined text:

I won't talk about underlined italics - that's for special people.

In HTML tags, it's just as simple. There are three tags: b, i, and u. You can nest them inside each other to get the desired combination:

<b><i>bold italic</i></b>
<b><u>bold underlined</u></b>
<i><u>please don't</u></i>

But in CSS, these are completely different properties:

{
/* bold */
font-weight: bold;

/* italic */
font-style: italic;

/* underline */
text-decoration: underline;
}

I can somewhat understand font-weight, but I haven't been able to remember the rules for applying the other two properties for 13 years now. If I need to make underlined text and have no hints, I can simply try all the options until it works:

text-style: underline;
font-style: underline;
font-decoration: underline;
text-underline: true;

It's very annoying. I want it either like this:

font-style: bold;
font-style: bold, italic;
font-style: italic, underline;

Or like this:

font-bold: true;
font-underline: true;
font-italic: true;

That's all I need.

Dev

Ж К П

В любом текстовом процессоре (Microsoft Word, Google Docs, LibreOffice) кнопки "полужирный", "курсив" и "подчеркнутый" находятся рядом:

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

Хочешь жирный и подчеркнутый:

Про подчеркнутый курсив не буду - это для особенных людей.

В HTML-тегах с этим тоже просто. Есть три тега: b, i и u. Можно вкладывать их друг в друга и получать желаемую комбинацию:

<b><i>полужирный курсив</i></b>
<b><u>полужирный подчеркнутый</u></b>
<i><u>пожалуйста, не надо</u></i>

А в CSS это совершенно разные свойства:

{
/* полужирный */
font-weight: bold;

/* курсив */
font-style: italic;

/* подчеркнутый */
text-decoration: underline;
}

Про font-weight еще более-менее понятно, но правила применения двух остальных свойств я уже 13 лет не могу запомнить. Если нужно сделать подчеркнутый текст, а подсказок взять негде, я могу просто перебрать все варианты, пока не заработает:

text-style: underline;
font-style: underline;
font-decoration: underline;
text-underline: true;

Очень бесит. Хочется либо так:

font-style: bold;
font-style: bold, italic;
font-style: italic, underline;

Либо так:

font-bold: true;
font-underline: true;
font-italic: true;

Большего мне и не надо.