Полезные техники HTML, CSS и JavaScript

[zag2art]

Спасибо! Расширяет кругозор.

[RiderSx]

А можно я вставлю свои пять копеек (я в курсе, что это перевод, но не могу не поделиться) :)
Способ сделать округлым и сгладить шрифт: cdpn.io/mflbq, единственное но — надпись получается довольно жирной, а значит подходит, пожалуй, только для заголовков/пунктов_меню :(

P.S.: Спасибо за перевод :)

[Gorky]

Узнал про calc(). Сошел с ума. Жаль поддержка браузерами опять не идеальна. Хотя из последних декстопных вроде все понимают.

[ambientos]

Ага, программеры добрались до css. Не знаю даже, радоваться этому или печалиться.

[iborzenkov]

радоваться — один scss что стоит

[Setrino]

scss нормалек если сесть и парe-тройку часов поработать, реально удобно становится. Вот .sass…

[cyber_ua]

программеры добрались до css

[humor]т.е до этого им занимались шаманы?[/humor]

[ambientos]

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

[bubuq]

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

[VolCh]

Математическое выражение показывает, что ширина не от балды, а зависит от чего-то ещё. Проще говоря, если вы видите что ширина 180, то откуда взялась эта цифра не понятно без изучения всех прилегающих размеров, а вот если видите (200-(45+45+45+45)), то можно сообразить, что она зависит от какого-то блока шириной 200 и четырех блоков по 45. Собственно, когда я вычислял цифры типа 180, то рядом в комменте писал формулу.

[moonlighter]

Нет, не усложнить. Если вы можете написать ширину явным числом — пишите на здоровье. В случае calc речь-то о другом: иногда вы не можете её написать явным числом, и тут-то calc приходит на помощь.

Если у нас элемент, ширина которого задана не в пикселах, а в процентах, то вы не можете явным числом уменьшить эту ширину на 20 пикселов (которые уходят, например, на поля или границы). Возможность вычесть из процентов пикселы — вот та мощь, которой лично мне зачастую очень не хватало! (Хотя физик внутри меня негодует от такого жестокого, наглого несоблюдения размерностей)

[moonlighter]

Разумеется, вы правы :) В мире CSS проценты — тоже длина. Просто от реального мира осталась привычка, что проценты обычно безразмерны, и глаз немного режет именно это…

[ambientos]

box-sizing

[ambientos]

Зачем задавать потомку margin, если можно у родителя задать padding?

[ambientos]

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

[vanxant]

Да банальнейшая ситуация: прибитый к низу страницы футер известной высоты.
У вас есть footer {height: 40px;} есть html, body {min-height: 100%;}, весь остальной, кроме футера, контент завернут в div.wrapper… и что вы напишете в .wrapper {min-height: ...??? }.
В том же бутстрапе сейчас извращаются с отрицательными margin-ами, но работает это не очень-то гладко.
А так когда-нибудь можно будет написать .wrapper {min-height: calc(100%-40px)}.

[ambientos]

Совсем недавно у меня, вроде бы, получалось решить нечто подобное с помощью box-sizing: border-box

[moonlighter]

Да никто ведь и не спорит, что если напрячься, то можно это решить без calc. Но chainik верно отметил, что все эти подходы можно объединить словом «извращаются». Потому что те свойства, которые применяются, применяются не по тому назначению, для которого они были задуманы. В итоге, такие решения в целом могут быть непонятными, нечитабельными, трудно модифицируемыми. Мне вот тоже плеваться хочется с около-бутстраповского липкого футера.

Главная мысль моего комментария была в том, что calc привносит не усложнение, а упрощение (пусть не всегда необходимое), и резко улучшает понятность стиля. Мне кажется, ваш тезис о том, что и до calc это можно было решить некоторыми неочевидными способами, только подтверждает эту мысль.

Однако же, я буду благодарен, если вы покажете, как вы это решали с помощью border-box. Всегда полезно знать разные подходы, чтобы выбирать объективно.

[Mithgol]

Мой пользовательский стиль для сайта nya.sh употребляет «calc(100% - 203px)» для задания ширины левой колонки через ширину правой колонки (203px), вычитаемую из общей ширины их (100%).

[ambientos]

Надеюсь, в ближайшем будущем наконец-то устаканится спецификация для создания более гибких раскладок — Flexible Box Layout, тогда необходимости в таких конструкциях не будет, я думаю.

[termi]

Для более обширной поддержки CSS-фильтров, можно использовать CSS-Filters-Polyfill

Just prefixing for the WebKit-Browsers
Translating to SVG-filters for Firefox
Translating to DirectX-filters for IE 6-9

[CrazyOne]

У меня например много работы и зачастую нет времени погружаться в доки. А такие топики можно быстро прочесть и узнать что-то новенькое. Спасибо автору!

[btd]

А есть ли какая нибудь аналитика для chrome frame? мне просто интересно сервисы показывающие популярность браузеров распознают ее в строке агента?

[shifty]

По поводу «Замена изображений»:
В HTML5 Boilerplate используется несколько иной способ:

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
 
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

который сам же Николас Галлахер рекомендует как более надежный.

[pratamishus]

не знал что фильтр можно накладывать через CSS. Надо же, а я все канвасом до сих пор балуюсь )

[bubuq]

… благодаря появлению первого механизма специально для раскладок (флексбоксов)...

…

Вебкитовская экспериментальщина — еще не весь веб.

Прям как разные люди писали =)

[leMar]

Поддержку браузеров надо писать. В нее все упирается.

[ibnteo]

В иллюстрации на руке вместо JavaScript написано Java, люди часто путают, не понимают, что это совершенно разные вещи.

[Dmi3yy]

Там еще и PHP о котором нет ни слова в статье.
Но приглянулась картинка именно по смыслу, а не по написанному.