http://www.alistapart.com/articles/css-floats-101/

Ако сега започвах да уча, как се позиционират обекти със CSS, то бих започнал с тази статия! :)

И така, инсталирам, рестартирам, и при още при един от първите сайтове, които тествах, попаднах на нов бъг (нов: в смисъл, бъг, който не съм виждал в IE8 или IE7): разместване на фона на страницата при определени условия с около 1 пиксел!

Направих тестова страница, на която този бъг може да се възпроизведе лесно:

http://www.optimiced.com/lab/2011/ie9-background-bug/

Тестови условия:

– Internet Explorer 9 (може да се инсталира на Windows Vista или Windows 7).
– Прозорецът на браузъра трябва да е максимизиран.
– Тествал съм с резолюция на екрана 1680×1050, 1440×900.
– Отворете тестовата страница, изчакайте да се зареди изцяло.
– С мишката скролнете до долния край на страницата, после обратно горе към началото. С вероятност 50%/50%, в горната част на страницата ще видите около 1px разместване във фона!
– Ако refresh-нете страницата, бъгът изчезва. Скролнете пак надолу-нагоре (един или няколко пъти), и той пак може да се прояви!
– (update 1) Ако Menu Bar туулбарчето не е отворено в IE9, бъгът не се появява. Ако the Menu Bar е отворено, появява се! (За всеки случай: toolbars open in IE9: Menu bar, Status bar.)
– (update 2) Ако не използвате AERO тема, бъгът не се появява (примерно, ако ползвате Windows Classic тема или Windows 7 Basic). Ако AERO е активирано (Windows 7 тема, с AERO активирано), бъгът се появява! (Благодарско на Adam Kiss, който също направи някои тестове.)
– (update 3) “Show tabs on a separate row” не трябва да е маркирано (то не е маркирано by default, така или иначе). Ако покажете табовете на отделен ред, бъгът също ще спре да се проявява (?).
– Ако увеличите количеството Lorem Ipsum текст в основната колона, бъгът изчезва.
– Ако увеличите (или намалите?) височината на основната колона (#content), в която е текстът, бъгът спира да се появява също. В момента тя е с min-height: 500px.
– Ако минимизирате прозореца на IE9 и после пак се върнете към него, бъгът изчезва (страницата се ре-рендва наново, нормално).
– Разместването се случва само в горната част на фона, при това относително randomly (и като честота на появяване на бъга, и като точно положение на разместването).

Фоновата картинка е приложена към елемента body:


body {
background: #8F8F8F url(../img/body-test.png) 0 0 repeat-x;
}


В кода няма нищо особено, което да предизвика какъвто и да бъг, който да размества с един пиксел изображението.

Лявата половина от този background-image е “истинската” (от оригиналния дизайн), дясната е направена с тестова цел — хоризонталните ивици помагат веднага да се забележи, ако има някакви размествания. Иначе това е оригиналът.

След многобройни опити установих, че размерът на фоновото изображение няма значение, както и форматът (PNG, JPG, GIF и т.н.).

Скролването трябва да се прави с мишка — пробвах и с клавиатура, ако ползвам стрелките нагоре-надолу, мога да възпроизведа бъга също, ако ползвам бутоните page-up/page-down, не мога (?).

Сега, има вариант, разбира се, нещо да не е наред точно при моята версия на Win7/IE9, така че ще съм много благодарен, ако още някой може да потвърди за съществуването на този мистериозен бъг! :-)

Опитах се и да разбера, какво точно го предизвиква, но засега без успех… Отказвам се. Просто виждам, че има бъг, при определени условия — защо се появява, не знам. (Че има проблем в rendering engine-а на новия IE9, то е ясно…)

Същия (или подобен) бъг не съм виждал никога в IE7/8, Firefox, Opera, Safari, Chrome. Само в IE9.

Ето как страницата изглежда нормално:

А така изглежда след едно или две скролвания надолу-нагоре:

Забележете и че в някои случаи, след скролване надолу-нагоре, ако минете с мишката над елементите от втория ред навигация, се появява още една визуална странност…

Тоест: При идеални условия, страницата би трябвало да изглежда така, но след скролване надолу-нагоре, тя изглежда така или така.

* * *

Иначе, IE9 — нищо чак толкова интересно, поне за мен. CSS3 transitions и text-shadow не се поддържат. Border-radius и box-shadow се поддържат — поне това е напредък. Ще тествам още.

И така, ако обичате загадките — сега е момента да ми помогнете да възпроизведа този странен бъг, а също и да споделите идеи, защо се появява! :-)

Аз се предавам. IE9:Michel — 1:0… поне засега.

Ерик Майер не закъсня да “нарисува” версия на логото в HTML5/CSS3:

http://meyerweb.com/eric/html-xhtml/html5logo/
(ще се вижда добре във всякакви модерни браузъри, например Opera, Firefox, Safari, Chrome…)

Интересно е да видите и този HTML5 лого генератор, направен от Daniel, с <canvas> елемент:

http://people.opera.com/danield/html5/html5logo/
(за най-добри визуални резултати (и функционалност) най-добре вижте с Opera 11.)

:-)

С една дума, през последните няколко седмици дизайнът на моя блог може да изглежда малко по-различно, в зависимост от това, по кое време на деня го посещавате. Денем е един, вечер е друг — променят се цветовете и някои други елементи от дизайна. Пробвайте примерно да прочетете този постинг преди 8 часа вечерта (тоест, денем) и после да го отворите пак след 9 вечерта или по-късно.

Magic! :)

Всъщност, става лесно, с 2-3 реда JavaScript код и още 20-ина реда CSS.

Но най-интересното, което мога да отбележа е, че всъщност май нито един от читателите ми не забеляза, че основният дизайн на сайта ми през последните седмици се промени малко (да не говорим пък изобщо за Night/Day хитринката). Явно само аз чета собствения си блог не през RSS а с помощта на най-обикновен Mozilla Firefox браузър! :-)

(Мисля си да поекспериментирам още малко тези дни, като намеря свободно време… нищо, че най-вероятно само аз ще си гледам хубавия (или грозен) нов дизайн… ;)

Все пак, понякога това е най-лесният или най-подходящ начин — да предположим, например, че нямате никакъв достъп до HTML кода, а само до основния CSS файл. Тогава следните четири реда код могат да се окажат полезни:


body {
color: red; /* all browsers will see this */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}


Както се вижда, относително лесно може да напишете правила, които да се четат само от IE8, IE7 или IE6. Или друга комбинация от тези основни три версии на IE (да се надяваме, че няма да имаме нужда от “хакове” за IE9).

(via #)

Може да си го свалите напълно безплатно оттук:

www.ms-studio.com/FontSales/anonymouspro.html

Иначе, моето лично предпочитание за monospaced шрифт е абсолютно и неоспоримо Consolas. Доколкото знам, този шрифт на Microsoft и също може да се намери за безплатно сваляне; шрифтът е много четлив и подходящ за писане на всякакви видове код — в моя случай, най-често го виждам да подрежда блокчета XHTML и CSS:)

{ Като си зарови човек draft-овете достатъчно надълбоко и… ;-) }

{ Нейде през юли тази година стават бяха събитията… }

Twitter е удивителна… медия? Социална мрежа? Средство за супер-бързо предаване на новини, мъдрости, глупости и “важни” неща като “В момента пия кафе и хапвам кроасани”? Нещо като IRC, но и с опция за SMS, филтриране, търсене, и опция за избор, какво, кога и как ще четеш?

Twitter е може би от всичко това по малко! :-)

…Тъй като съм уеб дизайнер и (частично) geek, ми беше изключително интересно да следя дискусията в две от последните публикации на Jeffrey Zeldman:

www.zeldman.com/2009/07/02/xhtml-wtf/
www.zeldman.com/2009/07/07/in-defense-of-web-developers/

…където се разискват разпалено последиците от прекратяването на работата по XHTML 2 стандарта, и това, какво ще се случи с XHTML 1.0, HTML 4.01, както и с новия HTML 5.

В един момент, обаче, в уебсайта на Зелдман се появи един странен бъг, във Firefox 3/Win: някъде след около 3/4 от страницата с последната му статия и многобройните коментари под нея, внезапно съдържанието изчезваше (screenshot). Без причина. Самата страница се валидираше перфектно, и нямаше никакви проблеми с encoding’а или HTML/CSS кода.

Самият Джефри забеляза проблема също (както и много други негови читатели) и се опитваше да го реши в продължение на много часове. Предположението, че проблемен pingback с UTF-16 encoding e предизвикал “отрязването” на страницата във Firefox, не се потвърди.

Опитах се и аз да подхвана проблема от някой край, от любопитство (не че не бях опитал и преди ден или два, но по различен път — предположението ми беше, че в някакъв коментар има незатворен таг, и той предизвиква “отрязването”; или пък има проблемен pingback; но и двете предположения не се потвърдиха след около 2 часа тестване).

Предположих, че има CSS бъг в rendering engine’а на Firefox, който може би може да бъде оправен с някакво правило в CSS файла на zeldman.com. Припомних си и че един от читателите спомена в блога на Джефри Зелдман, че е опитал с Firebug да провери нещо, затова набързо направих една тестова страничка, и към нея един малък CSS файл с правилото, което (хипотетично) щеше да оправи грешката. След това тествах във Firefox 3.0.11/WinXP. Проблемът изчезна! :-)

Един-единствен ред решаваше проблема за Firefox:

div#wrapper {
overflow: visible;
}

След това отделих още време за да тествам в детайл, дали промяната не засяга някой друг от популярните в момента браузъри (Opera 9.6, Safari 4, Chrome 2, IE7, IE6) и след като се убедих, че всичко е наред, писах на Зелдман в Twitter (отделно и малко по-подробен e-mail), като му предложих този fix за Firefox.

След малко прочетох отговора на Зелдман:

@optimiced Will try as soon as I’m back on my feet. Thanks wise one.

Малко по-късно, Zeldman имплементира идеята, и дизайнът му се оправи! :-)

За съжаление, след това се появи нов бъг, предизвикан от “поправката” на предишния — фонът на страницата, който е червен, “примигваше” за секунда или две при всяко зареждане, тъй като overflow: visible предизвикваше това, че фонът на елемента #wrapper се зареждаше сега с малко закъснение (преди: overflow: auto).

Е, след малко умуване, аз и още един читател предложихме две различни допълнителни CSS решения, които (на по-късен етап) се оказа, че се взаимодопълват добре, и решават проблема с примигването във всички браузъри — включително и във Firefox и Safari! :-)

Последно, да не пропусна да спомена, че Джефри Зелдман е пич! След цялата забавна история със CSS бъговете във Firefox, Джефри ми благодари и ме добави в своя Twitter, а после ми обеща и да ми изпрати своето ново (трето) издание на популярната си книга за уеб стандартите, като подарък! (Мисля и че някъде в CSS кода на zeldman.com има и още благодарности;-) Винаги е приятно да си общуваш с такива хора, дори и ако си общувате само със 140 знака съобщения! ;-)

* * *

А, и защо започнах статията с въпроса, какво е точно Twitter?

Защото, след като ползвам Twitter от поне няколко години, мога да твърдя, че Twitter позволява бърза, точна комуникация по съвсем нов начин. Коментарите в блоговете (както и формите за обратна връзка), също го позволяват, но Twitter е нещо различно. Нещо, което не мога да дефинирам точно, но което върши работа, и е забавно при това!

Затова, засега можете да ме намерите на Twitter (но не и на Facebook)… е, и в личния ми блог, разбира се! ;-P

[ This article is also available in English ]

Факт е, че:

1) Напоследък HTML 5 стандартът набира скорост.

2) XHTML 2.0 е вероятно никога да не се реализира като наследник на XHTML 1.0. Всъщност, най-вероятно е XHTML 2.0 да не се появи изобщо.

3) Немалко професионални дизайнери и CSS/HTML кодъри се отказват от XHTML 1.0 и се връщат обратно към HTML 4.01 (а някои от тях дори експериментират сериозно с HTML 5).

Ако сте уеб дизайнер и/или обичате да създавате HTML/XHTML код на ръка, съм любопитен, кой стандарт за HTML документи предпочитате в момента (изберете един от отговорите в анкетата по-долу):

 Loading …

Анкетата е непредставителна, несериозна, и резултите от нея вероятно няма да послужат за нищо друго, освен да се осведомя, дали в момента само аз си оставам (временно) привърженик на XHTML 1.0, или все още има и други като мен:)

Ако имате сериозни предпочитания към един или друг стандарт — XHTML 1.0 или HTML 4.01 (или може би дори към новия HTML 5?), ще се радвам и да разбера за аргументите ви “за” или “против” — може да оставите кратък коментар. При Дейв дискусията е изключително интересна, успях да прочета почти всички коментари вчера.

Лично на мен са ми малко неясни идеите на W3C. Как се развиват стандартите, в каква посока, и защо:

HTML 3.2 беше заместен от HTML 4.01, след това беше приет стандартът XHTML 1.0, а сега се разработва усилено… HTML 5? Никаква логика в номерирането, да не говорим пък за това, че първо имаме езика HTML (чийто корен се крие в SGML), след това W3C решават, че е добре да се опитат да обединят XML + HTML (“ражда” се XHTML 1.0), а накрая (поне привидно) се връщат към идеята за “чист” HTML и в новия стандарт (HTML 5) ‘X’-ът липсва…

Какво ли следва? Не знам. Лично аз се удивлявам малко от факта, че първите стандарти, които научих, когато започнах да се занимавам с уебдизайн, бяха HTML 3.2 и HTML 4.01, после дойде на ред XHTML 1.0 (“The Next Best Thing Since SLiced Bread” след HTML 4.01) — тогава ми се наложи да се науча да затварям тагове, които дори не трябва да се затварят (като img и br, например)… А сега, след XHTML 1.0, на ред отново е HTML?

За момента не планирам да променям стила си на кодиране. XHTML 1.0 Transitional & Strict вършат чудесна работа.

Освен това, използването на HTML 4.01 си има известни недостатъци (спрямо XHTML 1.0):

Например, при HTML 4.01 затварянето на някои тагове не е задължително. <p>, <li> могат да бъдат отворени, но не е задължително да се затворят след това, така че са валидни и двата следващи примера:

пример 1:

<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor Sit</a></li>
</ul>