Archive for the 'CSS' Category

“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:-)

The one pipe problem: (almost) solved!

Thursday, July 31st, 2008

CSS layout small diagramСлед една малка лула с черешов тютюн, и след като минах през следните (изключително полезни) линкове:

1. Internet Explorer 7 and the easy clearing method (SimpleBits)
2. New clearing method needed for IE7 (456BereaStreet)
3. Clearing floats without structural markup in IE7 (And all that Malarkey)

(more…)

“The one-pipe problem”

Thursday, July 31st, 2008

От два часа гледам редовете код и не виждам. Заплел съм се в един сложен CSS — пълен е с разни контейнери, floated left & right columns, clearfix’ове и други елементи.

Нещата, които очаквам да работят, не работят, както очаквам; а нещата, които би трябвало да не работят, работят (тествам във Firefox 3.0, IE 7, IE 6, Opera 9.5 и Safari 3.1/Win).

Отивам да си натъпча лулата с ароматен черешов тютюн (отдавна съм я изваждал от шкафа с лули, тютюни и уискита;-) и да проверя, дали не съм попаднал случайно на някой прост CSS one-pipe problem! :-)

CSS Naked Day ‘2008

Wednesday, April 9th, 2008

Днес, точно в полунощ, моят блог (www.optimiced.com), както и блогът на Ани (www.molif.com), се “събличат” от техните “CSS дрехи”.

Днес е ‘CSS Naked Day‘ — денят, който промотира Уеб стандартите!

CSS Naked Day 2008 - getting naked with CSS styles... and not only CSS ;-) class=

Този ‘CSS Naked Day’ продължава от 24 до 48 часа, и показва, че един сайт/блог с добре написан HTML+CSS може да изглежда доста добре и без дрехите си (тоест, без своите CSS стилове).

Така че, ако случайно видите моя блог без CSS днес или утре (тоест, без своя дизайн), да не се учудвате — ние “съблякохме” нашите CSS стилове за една благородна кауза — а, както се вижда и от снимката, която направихме преди няколко часа, не само CSS стиловете, но и дрехите си!! ;-)

Да живеят Уеб стандартите! :-D

PS Ако използвате WordPress и сте решили да си “съблечете” и вие блога днес и утре, Lorelle има много добър guide по въпроса, хвърлете едно око! И да не забравите да се запишете в списъка на Dustin Diaz! В момента има над 1300 участници вече;-)

CSS 3D ефект

Thursday, March 6th, 2008

Стъпка 1:

Отворете Silverback.

Silverback app (screenshot)

Стъпка 2:

Променете бавно размерите на прозореца на браузъра, който използвате в момента (Firefox, Opera, Safari, IE7 са ОК) и…

Стъпка 3:

…наблюдавайте ефекта. Хитро!

Има и дискусия по темата, как quasi-3D ефектът е постигнат само със CSS + полупрозрачни PNG файлове — на мен ми напомня на игрите от едно време; а гледайки симпатичния мумун, някак не мога да не се сетя за Donkey Kong на Nintendo!

CSS rullz! ;-)

Денят на голямото чистене

Thursday, September 20th, 2007

tag soup graphicТова да ви е познато отнякъде?

На мен – да. В най-лошите си кошмари един дизайнер, работещ с Уеб стандартите и забравил, какво е MS Word HTML, сънува подобен код.

Е, аз не сънувам. В моя случай, това е реален код, който се очаква да почистя… Да останат само H1, H2, H3, P, IMG SRC, A HREF и нищо друго (иначе един проект за сайт няма как да стане реалност).

Всъщност, системата е малко по-различна и включва писане на html from scratch, чистене и преглеждане (защото очевидно код като този няма как да се почисти)…

И няма кой друг да свърши тази работа. Така че, стискам зъби, пиша, почиствам внимателно, и пия втората ми чаша кафе за днес. Колкото по-бързо свърша, толкова по-бързо ще ми се махнат от главата тези FONT FACE... от главата. Бррр…

35 дизайнера по 5 въпроса

Friday, April 20th, 2007

Smashing Magazine публикуваха днес едно много интересно четиво.

На 35 уеб дизайнера бяха зададени следните пет въпроса:

  • 1 аспект от дизайна, на който отдавате най-голямо значение.
  • 1 от най-успешните CSS техники, която използвате най-често.
  • 1 шрифт, който използвате в проектите си често.
  • 1 книга, посветена на дизайна, която силно бихте препоръчали.
  • 1 списание, посветено на дизайна, което четете всеки ден/всяка седмица (онлайн или оффлайн).

Отговорите може да прочетете в самата статия:-)