clavin
-
Posts
200 -
Joined
-
Last visited
-
Days Won
2
Content Type
Profiles
Forums
Calendar
Store
Posts posted by clavin
-
-
Можно применять инлайн-блочные блоки, а не использовать float.
-
<link rel='stylesheet' media='(min-width: 1281px) and (max-width: 1366px)' href='css/1366x768.css' />
<link rel='stylesheet' media='((min-width: 1025px) and (max-width: 1280px)) and ((min-height: 874) and (max-height: 900))' href='css/1280x1024.css' />Надо указывать медиа-устройство, например так:
<link rel='stylesheet' media='all and (min-width: 1281px) and (max-width: 1366px)' href='css/1366x768.css' />
<link rel='stylesheet' media='screen and ((min-width: 1025px) and (max-width: 1280px)) and ((min-height: 874) and (max-height: 900))' href='css/1280x1024.css' /> -
В HTML-файле я использую css3pie, чтобы в IE работал множественный бэкграунд.
<style type="text/css" media="all">
.apost blockquote {
behavior: url(http://localhost/css3pie.htc);
display:block;
margin:0.5em 5em;
padding:0 20px;
-pie-background:url('images/quotes_left.gif') left top no-repeat, transparent url('images/quotes_right.gif') right bottom no-repeat;
background:url('images/quotes_left.gif') left top no-repeat, transparent url('images/quotes_right.gif') right bottom no-repeat;
}
</style>Код работает нормально и в IE6-7 оба бэкграунда отображаются.
Видно, что здесь я использую behavior. Эта инструкция у меня записывается в декларации свойств внутри скобок { и }.
А если мне потребуется сделать множественный бэкграунд для других элементов? Будет ли ошибкой, если я буду писать behavior: url(http://localhost/css3pie.htc) сразу в нескольких разных правилах для разных элементов? Ведь в этом случае я один и тот же файл подключаю несколько раз. Как поступать правильно?
Я же могу сказать, что когда я использую behavior с тем же подключаемым файлом два раза на разных элементах, то в IE6, например, появляются баги (то есть что-то браузеру не нравится), а в остальных вроде всё нормально, но это скорее из-за того, что они не понимают этот синтаксис.
-
Нарпимер:
selector:before {
position: absolute;
top: Xpx;
left: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}
selector:after {
position: absolute;
bottom: Xpx;
right: Xpx;
width: Xpx;
height: Xpx;
background: sprite_image no-repeat position;
}П.С. Для IE7 нужен фикс для поддержки этих псевдо-элементов
Верно. В Интернете есть различные решения, как реализовать множественный бэкграунд для браузеров, не понимающих CSS3. Спасибо, что напомнил.
-
Существует такая вещь как css спрайты. Я задался вопросом, можно ли с помощью одного изображения-спрайта сделать двойной фон для элемента неизвестной ширины и высоты, так чтобы одна часть изображения была вверху слева, а другая внизу справа.
Условный пример того, что я хочу сделать, можно увидеть здесь. здесь две кавычки сделаны двумя отдельными фоновыми изображениями. Можно ли их совместить в одно изображение? Учитывайте, что ширина и высота элемента для фона может быть любой и изменяться от ресайза.
Я рассмотрел этот вопрос и мне кажется, что это невозможно. Решил спросить у профессионалов, можно кто знает CSS-хитрость?
-
Great Rash, при изучении данной темы я столкнулся с той проблемой, что не хватает нужной терминологии. Я думаю, есть как минимум три вида масштабирования шрифтов, которые должны быть очевидно отличены друг от друга.
1) масштабирование с помощью браузера (CTRL + "+")
2) масштабирование с помощью тега <body>, когда на нём изменяется шрифт
3) изменение дефолтного шрифта в настройках браузера (если изменится то тоже произойдёт масштабирование шрифта на странице)
А то везде говорят о масштабировании, а о чём конкретно идёт речь непонятно. А ведь это три совершенно разные вещи!
-
1
-
-
При чем тут зуммирование? Речь идет о том, что при разных физических размерах экрана шрифт будет разного размера. Например у меня есть сайт который должен одинаково хорошо выглядеть в мобиле, в нетбуке и в телевизоре. Вот для этого я изменяю размеры шрифтов для кажного из устройств (с телека шрифт 12px читать невозможно если сидишь за 2 метра от него). И вот чтобы не менять 100500 строк CSS-кода под каждый случай я изначально указываю относительные размеры шрифтов, чтобы потом менять размеры всего текста на странице всего одним правилом.
Так понятно? Все еще смешно?
Сейчас стало понятно, что шрифты следует задавать только в относительных размерах на любых макетах, эластичных или фиксированных. Другой методики в HTML-вёрстке просто не существует. Поэтому без лишних вопросов следует именно так и верстать.
-
Я ничего не понял
-
Вот тут очень хорошо объясняется когда удобны относительные размеры шрифтов. Суть в том, что при необходимости мы меняем размер шрифта только для <body>, а весь оcтальной CSS подстраивается автоматом. Очень удобно.
Ну и вообще статья полезная
А если все размеры шрифтов указать в абсолютных единицах, то пользователь браузера при зумировании разницу не заметит...
Я имею ввиду этот пример
-
Вот тут есть немного %.
Спасибо за интересную ссылку, но вопрос это не раскрывает. Будь я обычным пользователем, что мне дадут эти относительные размеры шрифтов, если я не смогу одним нажатием клавиши исправить недочёты, возникающие из-за слишком маленьких или слишком больших шрифтов?
Я только иногда вижу ситуации, когда зум браузера помогает при чтении. Например на этой странице зумирование хорошо работает. При увеличении полоса прокрутки сначала даже не появляется (сам макет не увеличивается, а подгоняется под размер экрана). Зум на этом макете работает хорошо.
А если взять другую страницу, как например главная страница гугл, то при увеличении зума макет как будто просто увеличивается в размерах (как бы приближается к нам) и всё. Это уже плохо.
В общем, как мне кажется, на то как зумируется страница влияеет её макет. Каким он тогда должен быть этот макет, чтобы при любом или почти любом разрешении экрана зумироваие позволяло изменить нужным образом текст, не испортить макет и не создать горизонтальные полосы прокрутки? Это должен быть эластичный макет? Не изучал подробно этот вопрос, но мне кажется очевидным, что для нормального масштабирования текста одного условия, что нужны шрифты с относительными размерами, недостаточно.
Мои размышления ушли немного не в сторону
Я правильно понял, что зум браузера не просто влияет на размеры шрифтов, а делает некие сложные преобразования, что смысл использовать только лишь относительные размеры шрифтов (без чего-то другого в макете) теряется? -
Буквально "не перехватывается анонимными боксами". Вариант "НЕ передается" тоже адекватен.
Например, здесь вокруг контента одного дива накручиваются 2 анонимных обертки (table-row и table-cell), рядом с которыми браузеры еще втискивают (как умеют) боксы псевдоэлементов. Но наследование font-size работает только для настоящих элементов — span-ов.
А разве эти две анонимные обертки (table-row и table-cell) не являются псевдоэлементами?
Мне кажется, вы что то пропускаете. Здесь как мне кажется более наглядный пример для изучения вопроса. Не так ли?
Не уверен, что псевдоэлементы создают анонимные боксы. Вроде как анонимный бокс образуется на месте единицы в рассматриваемом примере.
-
В http://www.w3.org/TR/CSS2/cascade.html#inheritance сказано следующее:
Note that inheritance follows the document tree and is not intercepted by anonymous boxes.
Как лучше перевести эту фразу и каков её истинный смысл? Никак я её не пойму. Предполагаю такие варианты перевода: "Заметьте, что Наследование следует по дереву документа и НЕ передаётся анонимным боксам"? или "Заметьте, что Наследование следует по дереву документа и передаётся анонимным боксам"?
Помогите понять смысл сказанного
-
После прочтения поста http://habrahabr.ru/post/42151/ я сделал тестовую страницу http://cssdesk.com/UCA4e с таким кодом внутри:
body {
font-size:100%;
}
текст не в параграфе
<p style="width:200px; border:1px solid #ff0000;">текст внутри параграфа</p>
<p style="width:200px; border:1px solid #ff0000; font-size:120%;">шрифт в процентах</p>
<p style="width:200px; border:1px solid #ff0000; font-size:1.2em;">шрифт в em</p>
<p style="width:200px; border:1px solid #ff0000; font-size:16px;">шрифт в пикселях</p>
<p style="width:200px; border:1px solid #ff0000; font-size:12pt;">шрифт в пунктах</p>Хочется узнать, почему все так стремятся использовать относительные размеры шрифтов, если они полезны только в одном случае, если мы изменяем размер шрифта на теге <body>? Если же мы изменяем зум, например, в Firefox или другом браузере, то мы видим, что изменяются как шрифты, заданные в относительных размерах, так и шрифты, заданные в абсолютных значениях. В чём тогда преимущества для обычных пользователей? Только не говорите мне, что вместо меню "Вид->Масштаб" и клавиш "Ctrl" + "+" и "Ctrl" + "-" обычные пользователи полезут в настройки браузера и поменяют там дефолтный шрифт с 16 пикселей на 24 пикселя, чтобы у них половина сайтов стало отображаться неправильно.
Я думаю, обычный пользователь максимум воспользуется в Firefox опцией зумирования "только текст", а в другие настройки лезть не будет. Я сам имею значительный опыт работы с браузерами, но мне никогда не приходило в голову лезть глубоко в настройки, чтобы поменять там дефолтный шрифт.
-
Такая техника, вероятно, используется, чтобы одно и то же изображение не кэшировалось два раза, когда к нему обращаются по http и по https. Вопрос, на сколько валидна такая запись, чтобы её можно было применять повсеместно?
-
Нашёл от гугла такую рекомендацию. В ней рекомендуется для URL ресурсов не указывать протокол, а делать примерно так: background: url(//example.com/image1.gif). Польза от этого в том, что тогда изображение будет доступно всегда, какой бы протокол для страниц не использовался: http или https. На самом сайте google.ru такая методика кстати и используется. Что думаете об этой технике? Нужна ли она и когда эффективна?
-
Ну если такой специалист утверждает, то тогда можно поверить. Просто гугленье и поиск в Интернете не дают страницы, где бы однозначно говорилось, что эти оба синтаксиса корректные для IE7. В основном везде пишут, что первый вариант работает, а второй даже неявно намекается, что использовать нельзя. А на практике то можно!
-
Помогите разобраться. Известно, что в IE6-IE7 инлайн-блочными элементами можно сделать только из тех тегов, которые являются натурально инлайновыми, как например <span>. Но я недопонимаю на счёт IE7. Он поддерживает оба нижеперечисленных варианта или только верхний из них?
display:inline; zoom:1;
display:inline-block;
Мой опыт говорит что оба поддерживает одинаково: вариант 1 и вариант 2
-
Catherine, спасибо. Жаль в Opera не работает.
-
Я изучил проблему более подробно. Оказывается атрибут "placeholder" тега <input> работает как надо и делает текст-подсказку серым цветом, так что его легко можно отличить от обычного текста, вводимого пользователем. Проверял в FF, Safari, Chrome. Я занят с Wordpress и стилями внутри её административного модуля, и, вероятно, эта проблема где-то в этой cms, что текст-подсказка отображаются как обычный текст. Буду разбираться.
Предполагаю решить проблему с помощью тегов <style>...</style>, помещённых прямо внутри тега <body>, а не внутри <head>...</head>. Вроде для HTML5 этот приём разрешённый. Пока набросал тестовую страницу из решений, найденных мною в Интернете. И оно тоже пока не работает. Не удаётся получить красный цвет для текста-подсказки.
<style type="text/css">
.input-term-id:-webkit-input-placeholder {
{
color:#ff0000;
}
.input-term-id:-moz-placeholder {
color:#ff0000;
}
.input-term-id:-ms-input-placeholder {
color:#ff0000;
}
</style>
<div>Ввести текст: <input type="text" value="" placeholder="Указать URL" class="input-term-id" /> </div>
?Этот код можно также потестировать здесь.
-
У меня есть тег
<input id="foo" type="text" name="url" placeholder="Укажите URL" value="" style="color:#000000;" />
Проблема в том, что текст "Укажите URL" по умолчанию отображается так же как и обычный вводимый в текстовое поле текст. А хотелось бы его цвет сделать серым, чтобы нельзя его было спутать с обычным текстом, вводимым пользователем.
Но я не могу пользоваться стилями в подключаемых css-файлах. Мне желательно сделать все стили в атрибуте "style". Можно ли это осуществить?
-
Кстати! Думаю, что вместо "inline" термин "строчный" применять ошибочно, потому что строчными бывают буквы, поэтому при употреблении "строчный" возникнет коллапс в голове у читающего. Он в некоторых случаях не будет понимать, о чём идёт речь, ему будет сложнее понять материал.
Тоже самое про термин "box". Его не следует заменять термином "контейнер", потому что в английском языке есть точное слово "container", обозначающее русское слово "контейнер". Кроме того, в самом css стандарте есть большое количество употребления слово "container". Как его переводить в этом случае? Снова контейнером называть? Тогда будет путаница с термином "box".
Например здесь слово "container" употребляется часто, в том числе есть такое выражения как "block container box". Не знаю, что под ним подразумевается, но его можно перевести как "блочный контейнер бокса", "блочный бокс-контейнер", "блочный ограничивающий бокс", "блочный вмещающий бокс" и тому подобное.
-
1
-
-
На мой взгляд, из-за сложности, понятия с английского следует переводить так, как они читаются на английском.
box - бокс
line box - лайн-бокс (здесь слово "лайн" употреблено для обозначения признака, т.е. является как бы прилагательным. Употреблять "лайновый бокс" как то не по-русски и напоминает "инлайновый")
inline-block - инлайн-блочный (прилагательное)
inline - инлайновый (прилагательное)
block - блочный
block box - блочный бокс
В некоторых случая можно оговорить, что разрешены другие термины. Например, вместо inline (инлайновый) можно употреблять "строчный". Вместо "box" (бокс) можно употреблять "контейнер". Но лучше, конечно, произносить точно как в спецификации, чтобы путаницы не было даже у того, кто прочитал русскую версию перевода стандарта, а потом за уточнениями полез а англоязычную версию, т.к. сразу понятно где какой термин.
Ещё, вероятно, разные термины по-разному употребляются в разных употребляемых контекстах.
-
1
-
-
И если погуглить, то рекомендуют разрешение 72 pixels/inch.
А если присмотреться, то видно, что рекомендует это дизайнер с привычками первой половины 90-х и происходит это за три года до того, как браузерная реальность в лице 1in = 72pt = 96px была высечена в граните зафиксирована в CSS-стандарте
.Что-то не сходится.. Если смотреть в стандарте, то получается, что 1pt=1/0.75=1.333(3)px. Тогда в одном дюйме пикселей 1in=1.3333*72=96px
Размер экрана моего монитора по высоте равен где-то 30.2см или 11.88in. А в пикселях это будет 96px*11.88=1140. А у меня расширение экрана стоит 1024x768px. Где-то нестыковка или я что-то упустил.
Может поподробнее объясните со шрифтами? Самого этот вопрос всегда интересовал со шрифтами, но квалификации не хватает сделать какие-то выводы и понять, как их размеры строятся.
p.s. Подправил подсчёты
-
Оформи код здесь: jsfiddle.net/. Может что и видно будет.
Не могу реализовать запоминание внутри фукнции - замыкание
in JavaScript
Posted
Тогда переменную n вообще лучше вытащить в глобальную область видимости. В вашем коде эта n используется только при клике.