Archive for the 'CSS' Category

CSS Floats 101

Monday, April 4th, 2011

Въпреки че се занимавам със CSS (и HTML/XHTML) от много време, пак с голям интерес прочетох тази статия на Noah Stokes:

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

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

IE9 background shifting bug

Thursday, March 17th, 2011

След като писах за излизането на новия IE9, си го инсталирах и започнах да тествам как се държат различни видове уеб страници в него. Основно ми беше ми любопитно каква част от новия CSS3 драфт се поддържа от последната версия на Internet Explorer — примерно, rounded corners, box-shadows, text-shadow, gradients, transitions, и т.н.

И така, инсталирам, рестартирам, и при още при един от първите сайтове, които тествах, попаднах на нов бъг (нов: в смисъл, бъг, който не съм виждал в 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 лого в HTML5/CSS3

Thursday, January 27th, 2011

W3C си имат ново лого:

HTML5 logo

Ерик Майер не закъсня да “нарисува” версия на логото в 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.)

:-)

Night & Day дизайн експеримент

Friday, November 5th, 2010

Идеята не е нова очевидно, и все пак, ми беше интересно да експериментирам тези дни с нея…

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

Magic! :)

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

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

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

Таргетиране само на IE8, IE7 и IE6 в CSS кода

Friday, November 5th, 2010

Не е (съвсем) правилно да се “хаква” CSS кодът така, че определени правила в него да таргетират само определени браузъри — най-често, някои от версиите на IE (IE Conditional Comments са по-подходящи).

Все пак, понякога това е най-лесният или най-подходящ начин — да предположим, например, че нямате никакъв достъп до 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 #)

Anonymous Pro – интересен шрифт за код(ъри|иране)

Monday, September 28th, 2009

Ако честичко ви се случва да пишете код, то шрифтът Anonymous Pro може да ви се стори интересен и/или подходящ за целта. Предназначен е специално за писане на код (нулата, разбира се, е зачеркната;-) и включва и кирилица.

Anonymous Pro font

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

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

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

“Jeffrey Zeldman is now following you on Twitter”

Monday, September 28th, 2009

…или за ползата от Twitter.

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

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

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

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

Jeffrey Zeldman's hat…Тъй като съм уеб дизайнер и (частично) 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

XHTML 1.0 или HTML 4.01 (HTML 5)?

Friday, May 15th, 2009

Ако се занимавате професионално с уеб дизайн и пишете HTML/CSS код for living, може да ви е интересен фактът, че Dave Shea превключи от XHTML 1.0 към HTML 4.01.

[ 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 документи предпочитате в момента (изберете един от отговорите в анкетата по-долу):

< ?php if (function_exists('vote_poll') && !in_pollarchive()): ?>
< ?php get_poll(2); ?>
< ?php endif; ?>

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

(more…)

Още за шрифтовете на Win/Mac

Thursday, February 19th, 2009

Преди няколко дни писах за най-разпространените шрифтове под Mac/Windows (също и Linux).

Междувременно, намерих още един интересен материал, посветен на същата тема:

www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Това е списък с шрифтове, характерни за всички версии на Windows и MacOS. Понякога се наричат “browser safe fonts” (тоест, шансът повечето от тези шрифтове да присъстват на типична Mac или Windows система е доста висок).

Ако се занимавате с уеб дизайн, хвърлете едно око, може да ви е полезно!

Ето и извадка от списъка:

win-mac-common-fonts

Забележки:

1) Georgia и Trebuchet MS идват заедно с Windows 2000/XP и са също така включени в шрифтовия пакет на Internet Explorer (също и често идват с други приложения на Microsoft), така че те са доста популярни дори и на Windows 98 системи.

2) Символните шрифтове се показват само в Internet Explorer, в други браузъри се използва техен еквивалент (въпреки че Symbol работи в Opera, а Webdings работи в Safari).

3) Book Antiqua е почти като Palatino Linotype, а Palatino Linotype е включен в Windows 2000/XP, докато Book Antiqua идва заедно с Windows 98.

4) Тези шрифтове не са TrueType, а bitmap шрифтове, така че те няма да изглеждат добре когато се използват определени техни размери (те са били създадени за 8, 10, 12, 14, 18 и 24 пункта, при 96 dpi резолюция).

5) Тези шрифтове работят в Safari, но само когато се използва техният нормален стил, но не и bold или italic. Comic Sans MS е ОК в bold, но не и в italic. Други Mac браузъри емулират добре стиловете, които не са осигурени от самия шрифт.

6) Тези шрифтове са налични в Mac OS X, само ако Classic е инсталиран.

За повече подробности, вижте в оригинала:-)

Най-разпространените шрифтове под Windows, MacOS и Linux

Sunday, February 15th, 2009

Ако се занимавате с уеб дизайн и писане на (X)HTML/CSS код, следният списък може да ви е полезен. В него съм комбинирал най-разпространените шрифтове под Windows, MacOS и Linux системи. Данните ми са взети оттук и са валидни към 17-ти януари 2009:

Windows:

Microsoft Sans Serif: 99.61%
Arial Black: 97.82%
Franklin Gothic Medium: 97.58%
Palatino Linotype: 97.54%
Verdana: 97.54%
Arial: 97.13%
Courier New: 96.96%
Comic Sans MS: 96.83%
Tahoma: 96.79%
Lucida Console: 96.76%
Impact: 96.49%
Trebuchet MS: 95.97%
Sylfaen: 95.00%
Lucida Sans Unicode: 94.34%
Georgia: 92.97%

Mac:

Monaco: 96.91%
Arial: 96.62%
Courier: 96.48%
Helvetica: 96.48%
Arial Black: 95.78%
Verdana: 94.37%
Georgia: 93.53%
Helvetica Neue: 93.07%
Trebuchet MS: 92.69%
Geneva: 92.41%
Courier New: 92.12%
Gill Sans: 91.58%
Comic Sans MS: 91.42%
Times New Roman: 90.58%
Arial Narrow: 90.44%
Apple Chancery: 90.15%
Skia: 90.15%
Lucida Grande: 90.01%
Futura: 89.73%
Hoefler Text: 88.47%

*nix:

DejaVu Sans Mono: 92.31%
Bitstream Charter: 90.77%
URW Chancery L: 89.87%
Nimbus Mono L: 89.35%
Century Schoolbook L: 89.09%

В bold по-горе съм маркирал общо 7 шрифтови фамилии. Те са онези шрифтове, които се намират сравнително често едновременно под Windows и Mac, и това са:

1. Verdana (sans-serif font family)
2. Georgia (serif font family)
3. Courier New (monotype font family)
4. Arial (sans-serif font family)
5. Arial Black (sans-serif font family)
6. Trebuchet MS (sans-serif font family)
7. Comic Sans MS (sans-serif font family)

За съжаление, нито един от тези шрифтове не попада и сред най-разпространените шрифтове под Linux/Unix. Явно заблудата ми, че Verdana, например, е един от най-разпространените шрифтове под Windows/Mac/Linux, е била само заблуда — пълните данни, например, показват, че Verdana присъства на над 90% от Windows и MacOS системите, но само на около 50% от Linux…

Могат да се направят и още интересни изводи, ако се прегледат в детайл двата списъка (кратък и пълен), за мен засега е достатъчно, че (поне на теория) има няколко “сигурни” шрифта, които присъстват с голяма доза вероятност едновременно на Windows и Mac:-)


[ optimiced.com е виртуалният дом на Мишел, уеб/графичен дизайнер от слънчева прашна София | powered by WP & DreamHost | also available in English ]

0.643 / 37 / 19.5