IMfO.ru

All God’s chillun got shoes

Архив записей по категориям // CSS

IE, HTML5, createElement

HTML5 очень большой упор делает на обратную совместимость. Поэтому такие вещи, как например элемент <dialog>, можно использовать прямо сейчас: они добавляют новую семантику, и новые браузеры могут делать с ними что-то интересное, но и старые браузеры будут показывать что-то вменяемое. Но есть и другие элементы — например новые виды разделов, среди которых <footer>, <header>, <aside> — которые просто тянет использовать, но не получается. В IE6 и IE7 эти элементы неизвестны, браузер их игнорирует. Причем игнорирует настолько, что даже не дает назначить им в CSS ни одного свойства. А это значит, что <header> не получится даже заставить отображаться как блок, он будет вести себя как строчный элемент. Другими словами, использовать этот элемент сейчас можно, только если автору не интересно показывать страницу пользователям IE.

Иван Сагалаев: IE8 и HTML5

Решение есть. Правда, как обычно, через одно место.

[ read more ]

Categories: CSS,dHtml | comments: (0)

Opera 9.50a1

Сразу выцепил взглядом

Added support for using SVGs in img elements and the CSS background-image and list-style-image properties

Changelog for Opera 9.50 Alpha 1 for UNIX

js getters/setters, getElementsByClassName, css text-shadow, selectors, overflow-x/y. И пр.

Categories: CSS,dHtml,Soft | comments: (0)

MSIE fixed

Решение, придуманное Ромой Воронежским, непостижимо и просто — чтобы избавиться от дрожаний, нужно зафиксировать фон страницы.

Техногрет: Полноценный fixed в MSIE

Хорошая штука. Хотя в наш век трудно придумать что-то действительно новое…

Categories: CSS,dHtml | comments: (0)

Gecko: opacity bug

Время от времени сталкиваюсь с бажным поведением Gecko при смене opacity. То блок не туда встанет, то скролл обнулится. Хозяйке на заметку: помогает opacity:.99

[ read more ]

Categories: CSS | comments: (0)

Mozilla: window with background-color:transparent

Попробовал лисьи «Translucent Windows». Доволен.

<?xml version="1.0"?>
<window title="Hello" id="transpTest"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  style="background-color:transparent;
         border:5px double red;
         width:200px;
         height:200px;">
<description value="Hello, W..."/>
</window>

firefox.exe -chrome file://E:\tmp\transp.xul

Categories: CSS, dHtml | comments: (0)

Gecko: -moz-force-broken-image-icon

Для того, чтобы в том же LJ нормально отображалась иерархия тредов при просмотре их в Gecko с отлюченной графикой, можно поиграть с -moz-force-broken-image-icon, например, добавив в userContent.css такую строчку:

*{-moz-force-broken-image-icon:1 !important;}

Владимир Палант указывал на nsImageFrame::HandleLoadError(), но непонятно чем я в то время слушал. А зря, очень помогло.

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

Categories: CSS, Usability | comments: (0)

IE7b2 (Standarts support in IE. Part 4)

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

Categories: CSS, dHtml, Web-билдинг | comments: (0)

IE7b1 (Standarts support in IE. Part 3)

Как я понял, единственным «полноценным» положительным моментом является поддержка PNG. Один пункт вычёркиваем.

Acid2? Ага. За четыре года специалисты исправили 2 бага CSS (Peekaboo, Guillotine). Впечатлён, обрадован. Да и как не радоваться, если получилось, что «или»

Fixing a specific CSS problem, or fixing PNG image support.

Standarts support in IE. Part 2

уже в первой бете заменили на «и»? Просто плакать хочется от счастья. А как узнаешь, что и все старые хаки можно пользовать, то начинаешь восторженно поскуливать.

Селекторы CSS? Javascript? XHTML?.. А что это?

Итого: IE6 + new GUI == кусок г. Не думаю, что к релизу этот расклад изменится существенно.

PS. Ах, да, защита… Сломают этот дуршлаг, как обычно, и пользователи, обновляющиеся от силы раз в полгода, будут получать по полной программе. Да и обновления вряд ли помогут, ведь дырки там латают годами.

PPS. Сломают, сломают (несколько другая тема, но).

Categories: CSS, dHtml, Web-билдинг | comments: (1)

Mozilla: {display:inline-block} 1999-?

Кстати, если очень хочется, то можно воспользоваться решениями, предложенными Erik Arvidsson и Matthew Mastracci.

IE тоже не слишком хорошо понимает это свойство (комментарий Anne van Kesteren).

Categories: CSS | comments: (2)

-moz-column

-moz-column-count, -moz-column-width, -moz-column-gap, -moz-column-content.

Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.8a5)
Gecko/20041113 Firefox/0.9.1+

Глючит местами, но работает. Небо становится ближе с каждым днём.

Bug 251162 — Implement CSS3 columns.

Categories: CSS | comments: (3)

CSS: print version and links

В Mozilla относительные ссылки таковыми и остаются, в Opera — становятся абсолютными. Кому надо, тот придумает hack.

Пока не тестировалось, но особых граблей не вижу.

» source

Грабли-то есть. Вспомнил я об этом посте после ознакомления с «Частыми вопросами» версии для печати на seminar@npj.

Год назад я собирался написать HTC, написал её сейчас. Однако, обо всём по порядку.

[ read more ]

Categories: CSS | comments: (3)

Версия для печати: alternate stylesheet, media print

1. «Качает» ли браузер CSS-файлы, помеченные как alternate stylesheet
2. «Качает» ли при отображении на экране браузер CSS-файлы media=print
3. «Качает» ли браузер <img>, которым через CSS прописан display:none
4. И то же самое, если display:none прописан не для <img>, а для <div>, в котором находится этот <img>.

» source

Первые два вопроса заинтересовали (последние два не менее интересны, просто я знал ответ), сделал пару тестов. Многовато налепил, но лучше перебдеть, чем наоборот; думал, может какой баг интересный всплывёт. С другой стороны, перебирать все возможные варианты нет времени, если кто обнаружит другое поведение браузеров при других условиях — велкам.

[ read more ]

Categories: CSS | comments: (4)

nbsp, nobr, nowrap, wbr, shy, wj, zwsp...

Примерно год назад я читал «Guidelines on alt texts in img elements» и эта ссылка сразу попала в мои закладки. Ещё две статьи того же автора: «Word division in IE and other notes on the nobr markup and on suggesting possible "word" breaks», «Soft hyphen (SHY) — a hard problem?»

Peter-Paul Koch’s browser compatibility test & results for: <wbr>, ​, ­.

CSS3 Text Module: word-break-inside, да…

Categories: CSS, dHtml | comments: (0)

Браузерные войны. Больные люди

Ссылку прислали, удивить хотели. Забавные больные люди. В последнее время всё больше поражает то, до какой степени можно исходить на г., обсуждая браузеры. Как будто они того стоят.

[ read more ]

Categories: CSS, Soft | comments: (5)

ID+class: IE6

Забавное загибание парсера в IE6:

#test.on { background: #333; }
#test.off { background: #ccc; }

<p id="test" class="off">&160;</p>

based on original

Categories: CSS | comments: (0)

CSS: underscores

Второй раз за сутки в разных местах затрагивается одна и та же тема: нельзя использовать символ "_" в идентификаторах CSS.

  — Да, нельзя.
  — Нет, можно.
  — Версия CSS?

[ read more ]

Categories: CSS | comments: (0)

IE4.01-IE5.01: Child Selector Hack

Ещё раз об опасности дочерних селекторов с пробелами:

body > p {color:red; font-weight:bold;}
html > p {color:red; font-weight:bold;}
html > body p {color:red; font-weight:bold;}

Эти параграфы будут красными в IE4.01-IE5.01. Пример.

Вывод: писать html>body вместо html > body — хорошая привычка.

Categories: CSS | comments: (1)

Opera: XMLHttpRequest

Ну вот и дождались: в Опере 7.6 появится XMLHttpRequest. Всё-таки с Gmail’ом их крепко достали. Тот набросок, о котором я говорил вчера, в предварительной версии заработал почти сразу. Пришлось слегка исправить обработку <br/> при создании списка и копировании его элементов в textarea, но это уже другая история.

То, что сразу настораживает: закрывается дольше. Хотя… превьюшка, что с неё возьмёшь? Ставить основным браузером пока не собираюсь, послушаем отзывы других оперов. А то поставишь и думаешь: «Чего там модем делает, я ведь отменил загрузку?».

ToDo: ознакомиться с багами и взять на вооружение.

Categories: CSS, dHtml, Soft | comments: (2)

Tablezzzzz

Главная цель — отделить структуру от представления.

» source

[ read more ]

Categories: CSS, dHtml | comments: (5)

Tables, CSS and horror

• Andy Budd: «An objective look at table based vs. CSS based design»
• Dave Shea: «Gasp! Tables!»
• Patrick Griffiths: «Tables my ass»
• Richard Allsebrook: «Why HTML tables are bad form»
• Roger Johansson: «Tables for layout?»
• Dave Shea: «Tables? Oh, the horror!»

display: table

А кто виноват? Шесть лет, детка, шесть лет.

Categories: CSS, dHtml, Web-билдинг | comments: (1)

Any given sunday

Таблица. Табличные данные. Всё верно.

Список. UL/DL — не важно. Идеология, tabless, blah-blah-blah. И здесь тоже вроде как неплохо (простите меня, пользователи IE).

[ read more ]

Categories: CSS | comments: (13)

Standarts support in IE. Part 2

Joe Clark: It’s very simple, Robert: We want *everything* fixed.

Продолжение темы «Чего вы хотите от IE?».

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (3)

Скрытие CSS от браузеров. @import

В подавляющем большинстве случаев лично мне хватает переключения IE6 в Quirks Mode и использования хаков html>body и html:root. Всё в одной таблице стилей.

Но иногда «хочется странного».

[ read more ]

Categories: CSS | comments: (9)

2 Cells

При облаве в наркопритоне был зверски убит сержан Петров. Через трое суток сержанта отпустило.

Ну что, двинем тушками?

cell
3) части, отделения, на которые поделено что-л.
     а) ящик стола, бюро, серванта

Abby Lingvo

[ read more ]

Categories: CSS, dHtml | comments: (3)

Mozilla, Opera. Волшебные границы

Занятный баг (Mozilla). Занял меня надолго.

Поиграйте размером окна, посмотрите код.

Ещё одни волшебные границы (Opera).

Categories: CSS | comments: (1)

IE: и только боги знают…

Я уже писал об этом баге, но повторение — мать.

Два дня делал макет, рука уже тянулась к полке с пирожками. Потом вспомнил. Как только появляется несколько строк курсива в одном из блоков, вёрстка плывёт. С <blockquote> ещё как-то можно побороться, но при виде <em> руки опускаются. Выражаясь культурным языком, я жутко опечален.

Курс лечения для приведённого кода: отказаться от text-align:justify. Это было бы смешно, …

Categories: CSS | comments: (6)

IE ФАКтор

IE factor, в копилку.

[ read more ]

Categories: CSS | comments: (5)

ru_coding: бэккграунд в css

Блочные и строчные элементы надо различать.

Categories: CSS | comments: (0)

ШКодный браузер

Казалось, было бы только логично делать дизайн под броузер, которому принадлежит более 90% рынка, а только потом подгонять результат под остальные броузеры.

» source 1, » source 2, » source 3

[ read more ]

Categories: CSS | comments: (2)

Display: none. Invisible counter

На одном из сайтов увидел конструкцию следующего вида:

<div style="display:none">
<!-- HotLog -->
… код считалки …
<!-- /HotLog -->
</div>

[ read more ]

Categories: CSS | comments: (13)

CSS frames. IE5.0

В MSIE5 очень смешно: колёсико мыши не работает, а скроллер третьей кнопкой мыши скроллирует всю страницу, включая фиксед-области.

Всё же любопытно, нельзя ли использовать какой-нибудь CSS-хак, чтобы MSIE5.0 не видел этих извращений.

» source

[ read more ]

Categories: CSS | comments: (2)

CSS. No Frames. IE fixed

Не помню чтобы я давал две последние ссылки, а тема поднимается достаточно часто.

• Eric Bednarz: Position:fixed fixed for IE/win — идея. Кстати, нажмите Alt+F3 (View source) на этой странице (псевдографика вверху);
• Мои потуги: Position: fixed;
• Anne van Kesteren: Fixed positioning;
• Roger Johansson: CSS Frames.

Categories: CSS | comments: (0)

Standards support in IE? Heh

What do you want from the Internet Explorer team?

Если в двух словах, то всё просто: standards support.

Another thing that the commenters generally aren’t thinking of is «how to get adoption.» I keep pointing out that if we fixed the CSS and PNG issues, you still wouldn’t be able to use those for years. Why? Cause consumers (and companies) really don’t care about those issues and won’t download a new version just cause you fixed one or two issues.

The Scobleizer: «IE conversation is great»

Сами спрашивали, сами же и отвечаем. Ну вы поняли, да? IE не надо апгрейдить, потому что всё равно все будут стараться поддерживать старые версии этого [вырезано цензурой] браузера ещё пару лет. Логика поражает.

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Супер-Пупер-CSS-Based

body {
  background: url("
    javascript:
      document.body.onload = function(){
        // А здесь кусок кода.
        // Да побольше, побольше!
      }
  ");
}

*.htc, мелкие expression(), hacks, tricks… Я всё понимаю, но нахрена, простите, пихать javascript в CSS и кормить этим убожеством нормальные браузеры?!

Idiots.

Categories: CSS | comments: (4)

Font, font-family. Убеждения

font-family: Georgia, sans-serif;

Valid or non-valid, как вы считаете? Проверить.

Почему-то в голове с давних пор живёт мысль об инвалидности подобной записи. Я не одинок?

(thanks ganges)

Categories: CSS | comments: (9)

Графика, меню и все-все-все

Во-вторых, я рад, что вы так заботитесь о пользователях наладонников и иже с ними, но по-моему пользователей веб-броузеров пока что больше, а в нашей стране очень многие из них отключают отображение графики (представте себе 8). И что же они увидят в предложенном варианте? Посмотрите сами.

» source

Новенькое в деревне: «CSS: more accessible graphic menu».

Categories: CSS, imfo.ru, Usability | comments: (0)

Opera 7.50 Preview 1 build 3494

Opera 7.50 Preview 1 for Windows available.

Первые впечатления:

• Удивительно стабильна для первой беты.
• User interface redesign. И достаточно сильно redesign, нужно привыкать.
• В CSS норвежцы тоже покопались. Картинки на imfo.ru стали отображаться корректно (в прошлой версии Опера включала значения padding и border в размеры картинки, сжимая изображение).
• Gecko CSS hack html[xmlns] теперь не сработает, Оперу научили понимать этот селектор.
• Экспериментальный RSS Newsfeeds reader. NewzCrawler мне не заменит конечно, но интересно будет посмотреть на дальнейшее развитие.
• 3,6 Mb. Меньше, чем… ;)

Categories: CSS, RSS, Soft | comments: (2)

F11. @media projection. Презентация в Opera

7.3 Recognized media types

[ … ]

projection
Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.

CSS2 Specification: Media types

[ read more ]

Categories: CSS, Web-билдинг | comments: (2)

Some links. Галопом

• Подписи к картинкам средствами JavaScript. Яваскрипт — зло [ :) ], но такие решения мне нравятся тем, что при отключенных скриптах сохраняется usability (описание изображения остаётся в title).
• Русская «виртуальная» клавиатура. Живёт и здравствует.
• … still use IE?
• W3C and ISO Publish Final Version of Portable Network Graphics (PNG) Specification (read more).
• Using Accesskeys: 1, 2.
• -moz- (Netscape CSS Extensions).
• «CSS Crib Sheet» теперь имеет постоянный адрес.
• D. Keith Robinson «CSS Hacks — Your Take», Anne van Kesteren «Hacks: CSS or XHTML?».
  Так всё-таки хакать или нет? It depends. Imfo.

Буквосочетание «Alesh» неразрывно связано с народной мудростью о кривизне наджопной части тела и могиле.

kukutz: Есть вещи, которые остаются неизменными.

LJ ru_webdev: RegExp

Categories: CSS, Usability, Web-билдинг | comments: (1)

057.css

Загляденье (фунтациклирует по полной программе в Mozilla).

Categories: CSS | comments: (1)

Webmascon.com: useful.. but ugly

Webmascon vs. Webmascon (XHTML 1.1, CSS2).

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (2)

CSS Vault

В букмарки, однозначно.

Categories: CSS | comments: (0)

html {text-decoration: ugly;}

Веселился, читая высказывания клиентов webdev-контор (via):

«i want it tuesday»
it was monday.

«I like a counter, but a big one, displaying on EVERY page, but not text, with animated gifs»

«Can’t we make the text blink?»
<blink>argghh!</blink>

«i find all this white space boring. i think we need some wallpaper or something…»

«this site should target young children, teenagers, adults, business owners, possible contributors, and the elderly.»

» source

Некоторые разработчики порой тоже доводят до слёз (курсив мой):

[ read more ]

Categories: CSS, Web-билдинг | comments: (0)

Some links

Скажем «Нет!» спаму в формах комментариев наших блогов (интересно, а как с этим в рунете?..):

Now spammers have turned their attention to weblogs and comment forms. In order to increase search engine rankings you are posting advertisements to our Web pages. What you failed to understand is that bloggers are smarter, better connected, and more technologically savvy than the average email user. We control the medium that you are now attempting to exploit. You’ve picked a fight with us and it’s a fight you cannot win.

Adam Kalsey «Comment Spam Manifesto»

«Keep CSS Simple» — статья о мерзости CSS-хаков. Суть сводится к тому, что при вёрстке страниц крайне желательно использовать «чистый» CSS, а если и пользоваться хаками, то только двумя: @import для NN4 и /*backslash hack\*/ для IE5/Mac (т.к. разработка этих браузеров уже завершена). Дескать, иногда десять пикселей роли не играют, а если и играют, то пробуйте верстать по-другому. Всё правильно написано, но… Иногда одна строка html>body заменяет кучу CSS/HTML-мусора.

PHP mailing lists (rss, rdf).

Daily Python-URL (теперь и в rss).

Categories: CSS, PHP, Web-билдинг | comments: (0)

Нумерованные списки OL/UL/LI. Работа над ошибками

Вылезло несколько багов. Fixed.

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Some Links

QuirksMode — вы ещё там не были? На небе только об этом и говорят.

Sliding Doors of CSS: Part I, Part II — tabs, tabs, tabs.

CSS Border Design Challenge — добро пожаловать всем тем, кто не смог успокоиться после увиденного на Design Detector CSS-домика.

Text-Shadow in Safari 1.1. Браузеры начинают понимать свойство CSS text-shadow. Пользователи, у которых нет Safari, могут посмотреть скриншот. Очень приятно. Скорей бы.

«Opera нельзя сбрасывать со счетов». Я сейчас расплачусь.

TanaT: Основным конкурентом Mozilla является Opera, так? Именно эти браузеры обладают кросс-платформенностью и способны решать задачи управления почтой, просмотра страниц и новостей.

Крис Близзард: Что ж, я думаю, наш основной конкурент это Internet Explorer. Хотя Opera тоже нельзя сбрасывать со счетов.

fcenter.ru «Будущее Mozilla. Интервью с Крисом Близзардом»

Categories: CSS, dHtml, Web-билдинг | comments: (2)

Some Links

Есть у меня на винте папка «Цветовые решения». А что нам, дальтоникам, ещё остаётся делать… ;)

This application generates color schemes of several types. Every scheme is based on one (base) color, which is supplemented with additional colors making together the best optical imperssion — using one of the authentic algorithms.

pixy.cz «Color schemes selector»

Таблицы, блоки… Написано задорно, с огоньком (via):

If a fully integrated CSS web site (that replaces all <table> tags with <div> tags and CSS) is easier to maintain, WHY do these same people charge the same number of hours to build and maintain a web site?

decloak.com «Tables vs FULL CSS INTEGRATION»

Rounded corners in CSS. Без нагромождений div, img и пр. Лёгкое и простое решение. IE отдыхает, но это не страшно (:before, :after).

Categories: CSS, Web-билдинг | comments: (1)

Стильный домик. Absolutely no images

Дом, который построили CSS (via).

Лично я не сторонник таких методов, но впечатляет.

Categories: CSS | comments: (0)

NN4, New.com, Hidecertainsizes.css

• CSS Enterprise: NN4-compatible XHTML/CSS 3 column layouts. Забота о кариозных монстрах.
• CNet News.com (965 errors), Microsoft.com (149 errors) и так далее. С момента редизайна News.com прошёл уже месяц, подавалось под соусом «redesign with CSS/XHTML». В код до сих пор смотреть страшно.
• Myopera.net: тред на тему резки баннеров в Опера.

Categories: CSS | comments: (0)

В букмарки

• Floatutorial: Step by step CSS float tutorial;
• Mid Pass Filter. Фильтр для пятого Ослика (IE5.x/Windows). И только пятого. (via).

Categories: CSS | comments: (0)

Подвал внизу экрана/страницы

Новенькое в деревне: «CSS: #footer {position: absolute; bottom: 0;}»

Categories: CSS, imfo.ru | comments: (2)

Списки в IE, Mozilla, Opera. Version 1.1

(продолжение «OL, LI: content, counter»)

— Revenge doesn’t work.
— Sure it does.

х/ф «Get Carter»

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (2)

OL, LI: content, counter. IE & Opera

Mozilla побороть не смог, но вечер провёл занимательно. Спасибо. :)

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (5)

a href="#top"

HTML
<p><a href="#top">up-up</a></p>

CSS
a {behavior: url("a.htc");}
a[href^="#top"] {font-style: italic;}
a.top {font-style: italic;}

HTC
<public:attach event="oncontentready" onevent="setTop()" />
<script type="text/javascript">

var curURL;
with (self.location) {
  curURL=protocol+'//'+host+pathname;
}

function setTop() {
  if (element.href && element.href.indexOf(curURL+'#top')==0) {
    element.className='top';
  }
}

</script>

Не работает в Opera.

Запись a[href^="#top"], a.top {font-style: italic;} IE не поймёт, свойства нужно прописывать отдельно.

Categories: CSS, dHtml | comments: (0)

Color picker, menu, hints, etc.

Несколько client/server side скриптов, по большей части бесплатных: SoftComplex.com

Color picker в действии можно посмотреть или на сайте разработчика, или на Firdamatic (online tableless layout generator).

Шикарная вещь: Hints (всплывающие подсказки, tooltips).

Categories: CSS, dHtml, PHP | comments: (0)

Содержание книги в HTML

«Хождения» в интернет всё больше напоминают анекдот, в котором перечисляется куча воскресных дел (покраска гаража, покупка зимней резины, смена масла, etc.), а потом спрашивается, возможно ли сделать все эти дела в один день, если вы без автомобиля.

Задача: представить некий перечень в виде «книжного» содержания. Нашёл красивое решение:

HTML
<table width="100%">
<tr>
<td class="title"><span>Много много текста</span></td>
<td class="page">67</td>
</tr>
<tr>
<td class="title"><span>Много много текста много текста 
много текста … много текста много текста</span></td>
<td class="page">68</td>
</tr>
</table>

CSS
td.title { background: white url("dot.gif") 0 100% repeat-x; }
td.title span { background-color: white; }
td.page { vertical-align: bottom; }

И, например, такая точка: dot.gif

Categories: CSS | comments: (1)

Сделать меню. Теперь это просто

List-o-matic

PS. Не забудьте доработать напильником.

Categories: CSS, Web-билдинг | comments: (1)

Беззащитные собаки

span.dog:before {content: '\0040';}
span.dog:after {content: '\002E';}
span.dog>em {display: none;}

<p>test<span class="dog"><em>[at]</em>mail<em>[dot]</em></span>ru</p>

Не панацея, зато про войну.

Categories: CSS | comments: (2)

Text-shadow

Новенькое в деревне: «CSS: text-shadow»

Categories: CSS, imfo.ru | comments: (0)

Intersmash challenge. Первый победитель

Две текстовые колонки, «обтекающие» картинку между ними. Интересная техника.

Для того, чтобы правильно работало в IE, картинка грузится два раза. В принципе, если эти колонки обхватить ещё одним блоком-контейнером, убрать пикчер в фон этого контейнера, а в картинках колонок подгружать прозрачный пиксель или вообще вместо <img> использовать <div> и поиграть его шириной… Короче, очередная геморройная попытка превращения веб-страниц в хилый закос под печатные издательства.

Stay tuned.

Categories: CSS | comments: (0)

Лучше поздно, чем никогда

SimpleQuiz — Dan Cederholm предлагает несколько вариантов тактики HTML-разметки, путём обсуждения выбирается наилучший, подводятся итоги. Очевидные вещи, но обсуждение «почему так, а не иначе» достаточно познавательно.

The Big CSS List — достаточно большая подборка «CSS-based layouts» сайтов.

Listamatic — «power of CSS» для списков.

SlayerOffice — в последнее время с интересом смотрю в сторону javascript.

Under the Iron — серия интервью. В данный момент список таков:

• Jeremy Hedley (antipixel)
• Daniel Bogan (waferbaby)
• Jason Fried (37signals)
• Adam Kalsey (kalsey group)
• Anil Dash (anil dash)
• Mark Pilgrim (dive into mark)

Оказывается, что Mark Pilgrim однажды был уволен из-за своего блога, а через две недели нашёл себе другую работу. Опять же, «из-за» блога. Интересно, а мой начальник читал записи в категории Drink?

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Abbr. Acronym. IE

IE не понимает тэг <abbr>.

Костыли: bookmarklet, behavior:

CSS:
body {behavior: url('acronymie.htc');}

acronymie.htc:
<public:component />
<public:attach event="oncontentready" onevent="fixabbr();" />
<script language="JScript">
function fixabbr() {
	element.innerHTML =
element.innerHTML.replace(/(<\/?)abbr/ig,'$1acronym');
}
</script>

Categories: CSS, dHtml | comments: (0)

<q>

Новенькое в деревне: «CSS: quotes»

Categories: CSS, imfo.ru | comments: (2)

Table is nothing more than…

Новенькое в деревне: «CSS: tables (reformat)»

Тема поднималась в fido, основная часть подсмотрена здесь:

Even though the table makes the most sense for the data, I do not want it to display in the browser as a table. Well it is a quite a simple fix because a table is nothing more than markup that is styled using the default stylesheet rules the browsers come with.

Seamus P. H. Leahy «Reformat the Table»

Пользователям IE: вы не увидите самого главного.

Categories: CSS, imfo.ru | comments: (0)

Transparent rollovers (gif, png and css)

Новенькое в деревне: «CSS: прозрачные игры»

Categories: CSS, imfo.ru | comments: (0)

Rollovers для ссылок средствами CSS

Новенькое в деревне: «CSS: rollovers for links»

Categories: CSS, imfo.ru | comments: (3)

IE. CSS min/max-width/height

Вам не нравится, что IE не понимает свойства min/max-width, min/max-height? Мешает работать? Тогда вам сюда (minmax.js module).

Categories: CSS, dHtml | comments: (0)

SitePoint: Three-Column Layout

Очередной Three-Column Layout, в котором левый, центральный и правый блоки равны по высоте. JavaScript inside (кстати, интересная библиотека).

Categories: CSS, dHtml | comments: (0)

Tableless sQuaDRon.ru

Дисклаймер: это не является примером правильной вёрстки. [ LiNk ]

Расписывать времени нет. Have fun.

Opera7, Mozilla1.4/FB0.6, IE6, IE5*, …?

* — с глюком padding ссылки «далее» в постах правой колонки, где, извиняюсь за каламбур, низ картинки ниже низа текста.

Categories: CSS | comments: (2)

Таблицы или блоки? Table vs Tableless

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

(update: здесь была ссылка на источник)

[ read more ]

Categories: CSS, dHtml | comments: (4)

Validate This Page!

Jason Kottke «Standards don’t necessarily have anything to do with being semantically correct» and around:

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Dreamweaver MX and CSS

Macromedia и CSS: «Weaving CSS Dreams»

Categories: CSS, Web-билдинг | comments: (0)

Переводы документов W3C

Русские переводы документов World Wide Web Consortium (W3C).

CSS, XML, XHTML… Где бы ещё время найти…

Categories: CSS, dHtml, Web-билдинг | comments: (0)

IE {font-style: italic}. Horizontal scrollbars

У Simon Willison'а в CSS есть любопытное место:

blockquote {
	/* font-style: italic; 
	- this causes horizontal scrollbars in IE6.
	Lord only knows why. */
}

I hate IE, ага.

Сохранение и тестирование страницы, содержащей <blockquote>, показало, что font-style: italic; можно раскомментировать, но при этом необходимо явно указать ширину родительского по отношению к нему элемента (body, div#mainArea или div.entry). Горизонтальную полосу прокрутки получилось убрать уже при width: 99.8%, но вообще-то требуется чуть меньше.

Всё это к тому, что я тоже столкнулся с подобной проблемой и был несколько э-э-э… обескуражен таким сволочным поведением. Пришлось пойти на некоторые хитрости при очередной смене оформления сайта.

На данный момент левая колонка имеет фиксированную ширину в пикселях, а правая - «плавающую» от 540px (min-width) до 50em (max-width), а если попадает в эту вилку, то 69% (люблю круглые числа). Для непонимающего min/max-width IE добавил следующее:

CSS:
#cont { behavior: url('../css/width.htc') }

Width.htc:
<public:attach event="ondocumentready" onevent="contwidth()" />
<script language="JavaScript" type="text/javascript"><!--
function contwidth() {
if (element.offsetWidth<='760') {
	element.style.width='540px';
}
if (element.offsetWidth>'760') {
	element.style.width='50em';
}
}
//--></script>

PS. Рисовать совершенно не умею. Лишний раз убедился.

Categories: CSS | comments: (3)

Академический дизайн

Обрывки утренних мыслей. Курсив мой.

[ read more ]

Categories: CSS, dHtml, Web-билдинг | comments: (0)

XML/XSLT/CSS. A Small Demonstration

Жаль, что мне уже пора на работу. Оставил в букмарках до вечера.

PS. Я надеюсь, что по сабжу понятно, какими браузерами смотреть это чудо.

Categories: CSS, PHP, Web-билдинг | comments: (2)

IE …, и …, и …

И снова о нестандартном стандартном продукте.

Categories: CSS | comments: (0)

Opera, баннеры резать нехорошо!

Alt+P.

В "Стилях страницы" (Page style) поставить галку "Моя таблица стилей" (My style sheet) и указать путь к Hidecertainsizes.css (из \Styles\user\). Указанные в этой таблице стилей размеры либо оставить «as is», либо добавить/убрать на свой вкус.

При желании этот «агрессивный» CSS можно дополнить интересными вещами:
iframe {content: '[-=IFRAME was here=-]' !important;}

…"Author/User mode" возле адресной строки.

Categories: CSS, Usability | comments: (2)

Rainbow of buttons

If IE supported this, the web would be a better place.

Сабж. [ LiNk ]

Categories: CSS, dHtml | comments: (0)

Вредная идеология™. Exler

«Битриксу» была поставлена задача по возможности сохранить все старое, но сделать грамотно и профессионально. По-моему, получилось.

Alex Exler (forum.exler.ru)

[ read more ]

Categories: Web-билдинг, CSS, dHtml | comments: (1)

Slantastic

Для замены больших пикчеров:

• Eric Meyer «Slantastic Demo»
• Lasse Reichstein Nielsen «Information on Border Slants»
• Tantek Çelik tantek.com

Categories: CSS | comments: (0)

IE. Text Size: Em & %

Для верхних трёх строк:

  body {font-size: .9em;}
  p {font-size: 1em;}
	или
  body {font-size: 1em;}
  p {font-size: .9em;}

Для нижних:

  body {font-size: 90%;}
  p {font-size: 1em;}
	или
  body {font-size: 100%;}
  p {font-size: .9em;}

Вот ведь…

Categories: CSS, dHtml | comments: (0)

Зёрна от плевел. IE5, IE6

Disclaimer: Хаки не пройдут валидацию.

p {color : red; font-size: .5em;}
//p {color: green;}
p {/font-size: 1.5em;}

//li.ie_five {font-weight: bold;}
li.ie_six {/font-weight: bold;}
html>body li.other {font-weight: bold;}

• IE5: Green text, font-size: 0.5em;
• IE6: Red text, font-size: 1.5em;
• Other: Red text, font-size: 0.5em.

Тестировалось вяло. Болею.

А теперь для людей, у которых чешется в области валидности:

p {color: green; color/* */: red;}
html>body p {color: blue;}

• IE5: green;
• IE6: red;
• Other: blue.

Categories: CSS | comments: (1)

A Night at the Opera. Inc.com

Интересный хак.

Что приятно удивило, так это желание найти решение проблемы, невзирая на то, что «оперный» трафик на Inc.com стремится к бесконечности (0,00001%). С другой стороны, это не хомяк — ему положено.

Вот лично мне например, лень поставить лишний <br /> в шаблоне для пользователей эмулятора браузера IE5 (сколько вас, товарищи? Может быть вам давно пора сюда?). Проще переделать всё сразу. ;)

Redesign. Comming soon… или чуть позже.

Categories: CSS | comments: (0)

Версия для печати. CSS. A href

Обычно версии для печати делают так: убирают всё лишнее (навигация, etc.), показывают ссылки, т.е. вместо «ткните сюда» на печать отдают «ткните сюда (http://путь/к/документу)».

Обе задачи решают скриптами, хотя с этим прекрасно справляются CSS:

[ read more ]

Categories: CSS, Web-билдинг | comments: (0)

Tutorials and Articles. CSS

CSS rollover menu, popup menus, dropdown menus… Ещё одно место сабжа (english) [ LiNk ]

Categories: CSS | comments: (0)

Div-design

Если сие творение использовать как очередной сетевой мусор (бросить в папку temp/downloads/etc.), то это ещё куда ни шло.

Внимательно изучать не стоит. Плохой html. :)

Categories: CSS | comments: (0)

Красноглазый креатиff

№ьутг фЖрщмук {
  display: bolk;
  bored: 1px solid #000;
}

<h1>Go to bed, mf!</h1>

Categories: CSS, Humor | comments: (2)

DIV. Table. Align

В div надо поместить таблицу и прижать вправо. В ie6 — без проблем. В Mozilla — таблица остается слева ибо box — text-aline * не помогает. Конечно, можно прописать таблице width="100%", но: а) не кошерно; б) страшно глючит в ie6. Можно прописать width="100%" не table, а td, прекращаются страшные глюки в ie6, но Мозилле на эту конструкцию совершенно пофиг, то есть как была таблица слева, там она и остается.

Решение #1: Прописываем таблица display: inline. И в Mozilla, и в ie6 все работает. Но: а) черт его знает, как это будет работать в ie5.5 и ie5; б) не работает в Opera7.

» source

*- опечатка ( text-align )

Решение #2:

/* Для выравнивания вправо: */
div {text-align: right;}
div table {margin: 0 0 0 auto;}

/* Для центрирования: */
div {text-align: center;}
div table {margin: 0 auto;}

Необходимости в div table {display: inline;} вроде бы нет.

Понимают: IE6, Opera7, Mozilla1.2 (в других не смотрел). В данном случае с выравниванием вправо должны быть проблемы у шестой Оперы.

Мысль интересная, можно и глубже покопаться.

Categories: CSS | comments: (1)

CSS. Javascript. Приблуды

The power of JavaScript in the hands of the user.

These bookmarklets let you see how a web page is coded without digging through the source and experiment with new code without editing the actual page.

Почти два десятка небольших скриптов [ LiNk ] для достижения занимательных результатов. Например, можно в pop-up окне задать свойства CSS родительской по отношению к этому окну страницы.

Для каждого скрипта дана информация о его работе в IE, Mozilla, NN, Opera.

Categories: CSS, dHtml | comments: (0)

CSS {position: fixed}. IE hack

Новенькое в деревне [ LiNk ]

Один из вариантов решения проблемы непонимания IE свойства CSS {position: fixed}. Without frames, scripts, etc. Работает в IE, Opera, Mozilla.

<strike>Bag</strike> Bug reports приветствуются.

Last update: 07.06.2003

part 2

Categories: CSS | comments: (3)

CSS Destroy. I do not intend to save the world

Эксперименты. [ LiNk ] IE, IE… ваш «любимый, стандартный, корректно отображающий страницы, пользуемый большинством» Осёл понимает слишком мало хороших вещей.

Categories: CSS | comments: (1)

Drop-down menu. CSS+JavaScript

Написано для собственных нужд.

[ read more ]

Categories: CSS, dHtml | comments: (1)

Думы мои, сумерки…

При желании субменю можно сделать цветом фона и -3 шрифтом, а при фокусеровке на него делать нармальный цвет и размер, CSS это доступно… Но изврат!

© xpoint.ru

Продолжаю думать о меню.

Categories: CSS | comments: (0)

Добротное

DHTML+CSS меню. Хорошо сделано, хоть и есть небольшие проблемы с седьмой Оперой. Первый пришедший на ум вариант обхода: если Menu Bar расположен вверху страницы, а количество подпунктов в выпадающих списках больше определённого числа, то будет смотреться вполне достойно.

…и на главной странице BrainJar.com

Categories: CSS, dHtml | comments: (0)

CSS: content vs behavior

Новенькое в Деревне [ LiNk ]

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Стильные штучки для чмокающего Осла

Достал меня IE кривизной своей. Хотите писать для бродилок, которые следуют рекомендациям w3c.org? Без проблем. Просто добавьте в CSS:

p{cssText: font-weight: bold}

Categories: CSS, Web-билдинг | comments: (0)

Bolk. CSS. Webdings

Есть:

CSS:
.w { font-family: Webdings }

HTML:
<span class="w">3</span>

Вариант:

CSS:
.w { font-family: Webdings; content: attr(alt) }

HTML:
<span class="w" alt="back">3</span>

Opera 6.05, Mozilla 1.3 — цифра '3'. Пролетают, а жаль :(
Opera 7.02 — текст 'back'
IE 6, Mozilla 1.2 — стрелка из Webdings
Other — ?

Основано на том, что IE не понимает свойство 'content' в таком виде. Опера (в отместку ;]) не отображает символы шрифта Webdings.

Для приближения к изначальной задумке в alt’ах можно проставить &#8592; &#8594; &#8656; &#8658; или вообще не указывать alt в span’е.

Вот так и живём… ИнВалидные и нестандартные…

Update. Остановился на таком варианте (без излишеств, просто и со вкусом):

CSS:
.w, .w1, .w2 { font-family: Webdings; content: attr(alt); }
.w1 { content: url('_туда_.GIF'); }
.w2 { content: url('_сюда_.GIF'); }

HTML:
<span class=w1>3</span>
<span class=w2>4</span>
<span class=w>H</span>
<span class=w>U</span>

Где-то пролетал hack с использованием скриптов и *.htc в a:after/before {content: something}, работающий в IE… Будем искать.

Categories: CSS | comments: (0)

RTFM

Постоянно забываю дать ссылку на полезный архив спецификаций (CSS, HTML, XHTML, XML, XLS, Java, PHP, SQL)

Categories: CSS, dHtml, Web-билдинг | comments: (0)

Календарь. Tables. CSS

Делаю календарик для новостей и смотрю на чужие приме… ошибки. Для меня остаётся загадкой потребность людей писать в коде таблиц вещи в духе <td class="calendar">…</td>. Зачем отдавать ненужный мусор, если есть CSS?

[ read more ]

Categories: CSS, Web-билдинг | comments: (2)