Комментарии 37
Спасибо! Расширяет кругозор.
НЛО прилетело и опубликовало эту надпись здесь
А можно я вставлю свои пять копеек (я в курсе, что это перевод, но не могу не поделиться) :)
Способ сделать округлым и сгладить шрифт: cdpn.io/mflbq, единственное но — надпись получается довольно жирной, а значит подходит, пожалуй, только для заголовков/пунктов_меню :(
P.S.: Спасибо за перевод :)
Способ сделать округлым и сгладить шрифт: cdpn.io/mflbq, единственное но — надпись получается довольно жирной, а значит подходит, пожалуй, только для заголовков/пунктов_меню :(
P.S.: Спасибо за перевод :)
Узнал про calc(). Сошел с ума. Жаль поддержка браузерами опять не идеальна. Хотя из последних декстопных вроде все понимают.
Ага, программеры добрались до css. Не знаю даже, радоваться этому или печалиться.
радоваться — один scss что стоит
программеры добрались до css
[humor]т.е до этого им занимались шаманы?[/humor]
По крайней мере мне гораздо нагляднее объявлять ширину явным числом, не прописывая никаких левых математических выражений. По-моему CSS зачем-то пытаются усложнить.
НЛО прилетело и опубликовало эту надпись здесь
Математическое выражение показывает, что ширина не от балды, а зависит от чего-то ещё. Проще говоря, если вы видите что ширина 180, то откуда взялась эта цифра не понятно без изучения всех прилегающих размеров, а вот если видите (200-(45+45+45+45)), то можно сообразить, что она зависит от какого-то блока шириной 200 и четырех блоков по 45. Собственно, когда я вычислял цифры типа 180, то рядом в комменте писал формулу.
Нет, не усложнить. Если вы можете написать ширину явным числом — пишите на здоровье. В случае
Если у нас элемент, ширина которого задана не в пикселах, а в процентах, то вы не можете явным числом уменьшить эту ширину на 20 пикселов (которые уходят, например, на поля или границы). Возможность вычесть из процентов пикселы — вот та мощь, которой лично мне зачастую очень не хватало! (Хотя физик внутри меня негодует от такого жестокого, наглого несоблюдения размерностей)
calc речь-то о другом: иногда вы не можете её написать явным числом, и тут-то calc приходит на помощь.Если у нас элемент, ширина которого задана не в пикселах, а в процентах, то вы не можете явным числом уменьшить эту ширину на 20 пикселов (которые уходят, например, на поля или границы). Возможность вычесть из процентов пикселы — вот та мощь, которой лично мне зачастую очень не хватало! (Хотя физик внутри меня негодует от такого жестокого, наглого несоблюдения размерностей)
НЛО прилетело и опубликовало эту надпись здесь
box-sizing
НЛО прилетело и опубликовало эту надпись здесь
Зачем задавать потомку margin, если можно у родителя задать padding?
Ну или приведите обоснованный пример, где без конструкции calc() ну никак не обойтись, у меня с ходу придумать не получается.
Ну разве что в родителе не всегда нужно или вообще не нужно, чтобы были эти паддинги.
Ну разве что в родителе не всегда нужно или вообще не нужно, чтобы были эти паддинги.
НЛО прилетело и опубликовало эту надпись здесь
Да банальнейшая ситуация: прибитый к низу страницы футер известной высоты.
У вас есть footer {height: 40px;} есть html, body {min-height: 100%;}, весь остальной, кроме футера, контент завернут в div.wrapper… и что вы напишете в .wrapper {min-height: ...??? }.
В том же бутстрапе сейчас извращаются с отрицательными margin-ами, но работает это не очень-то гладко.
А так когда-нибудь можно будет написать .wrapper {min-height: calc(100%-40px)}.
У вас есть footer {height: 40px;} есть html, body {min-height: 100%;}, весь остальной, кроме футера, контент завернут в div.wrapper… и что вы напишете в .wrapper {min-height: ...??? }.
В том же бутстрапе сейчас извращаются с отрицательными margin-ами, но работает это не очень-то гладко.
А так когда-нибудь можно будет написать .wrapper {min-height: calc(100%-40px)}.
Совсем недавно у меня, вроде бы, получалось решить нечто подобное с помощью box-sizing: border-box
Да никто ведь и не спорит, что если напрячься, то можно это решить без calc. Но chainik верно отметил, что все эти подходы можно объединить словом «извращаются». Потому что те свойства, которые применяются, применяются не по тому назначению, для которого они были задуманы. В итоге, такие решения в целом могут быть непонятными, нечитабельными, трудно модифицируемыми. Мне вот тоже плеваться хочется с около-бутстраповского липкого футера.
Главная мысль моего комментария была в том, что calc привносит не усложнение, а упрощение (пусть не всегда необходимое), и резко улучшает понятность стиля. Мне кажется, ваш тезис о том, что и до calc это можно было решить некоторыми неочевидными способами, только подтверждает эту мысль.
Однако же, я буду благодарен, если вы покажете, как вы это решали с помощью border-box. Всегда полезно знать разные подходы, чтобы выбирать объективно.
Главная мысль моего комментария была в том, что calc привносит не усложнение, а упрощение (пусть не всегда необходимое), и резко улучшает понятность стиля. Мне кажется, ваш тезис о том, что и до calc это можно было решить некоторыми неочевидными способами, только подтверждает эту мысль.
Однако же, я буду благодарен, если вы покажете, как вы это решали с помощью border-box. Всегда полезно знать разные подходы, чтобы выбирать объективно.
Мой пользовательский стиль для сайта nya.sh употребляет «calc(100% - 203px)» для задания ширины левой колонки через ширину правой колонки (203px), вычитаемую из общей ширины их (100%).
Для более обширной поддержки CSS-фильтров, можно использовать CSS-Filters-Polyfill
Just prefixing for the WebKit-Browsers
Translating to SVG-filters for Firefox
Translating to DirectX-filters for IE 6-9
У меня например много работы и зачастую нет времени погружаться в доки. А такие топики можно быстро прочесть и узнать что-то новенькое. Спасибо автору!
А есть ли какая нибудь аналитика для chrome frame? мне просто интересно сервисы показывающие популярность браузеров распознают ее в строке агента?
По поводу «Замена изображений»:
В HTML5 Boilerplate используется несколько иной способ:
который сам же Николас Галлахер рекомендует как более надежный.
В 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%;
}
который сам же Николас Галлахер рекомендует как более надежный.
не знал что фильтр можно накладывать через CSS. Надо же, а я все канвасом до сих пор балуюсь )
НЛО прилетело и опубликовало эту надпись здесь
Поддержку браузеров надо писать. В нее все упирается.
В иллюстрации на руке вместо JavaScript написано Java, люди часто путают, не понимают, что это совершенно разные вещи.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Полезные техники HTML, CSS и JavaScript