گاهی اوقات به نکات و شگردهای جالبی در مورد کار با عناصر CSS برمی خورم. چه از طریق وب چه تجربه شخصی، مطالعه کتاب و گاهی وقت ها هم با وارسی فایل های سی اس اس حرفه ای ها، در الگو هایی که برای آموزش ارائه می دن. از اونجایی که این نکات منظم و مرتب نیست و هر نکته ای رو یه جا فهمیدم و بکار بردم، انتظار اینکه بیام سلسله وار و منظم لیستشون کنم یه خورده بی انصافیه (البته اگر وقتم مهلت می داد حتما همچین کاری می کردم) تصمیم گرفتم پست هایی رو تحت نام شگردهای CSS شروع کنم تا به هر تکنیکی رسیدم فوری پست کنم تا نه من یه وقتی یادم بره و نه خدای نکرده شما بی نصیب بمونید. البته این نکته هم قابل ذکره که شاید اینا از دید شما که استادید یه تکنینک محسوب نشه و بیشتر حالت امپریکال داشته باشه، چرا که مو به مو همه چیز شرح داده شده تا مبتدی هم درک کنه. خلاصه به بزرگی خودتون ببخشید. خوب بریم سراغ تکنیک این پست:

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید:

<div class="test1">Hello Morteza</div>
<div class="test2">Hello Morteza</div>

این هم سورس سی اس اس کلاس ها، یکی سایز فونتش به واحد px و دیگری به واحد em
(نوع فونت هم مهم نیست):

.test1 { font-size: 1.5em; }
.test2 { font-size: 15px; }

اگر مدل بالا رو امتحان کنید نتیجه دو نوع نوشته با فونت سایزهای متفاوت خواهد بود. (یقینا نوع مرورگر هم بی تاثیر است). برای حل مشکل فوق تنها کافیه برای مشخصه body در فایل سی اس اس، سایز فونت رو برابر با 62.5% قرار بدین. به غیر از این عدد هر عددی رو که انتخاب کنید دو سایز با هم متفاوت خواهند بود. (البته این حالت هم مقدار ناچیزی خطا داره که به چشم نمیاد) کد زیر رو به فایل سی اس اس خودتون انتقال و نتیجه رو مشاهده کنید:

body { font-size: 62.5%; }

پس هر جا دیدید طرف اندازه فونت رو در body برابر 62.5 درصد قرار داده، تعجب نکنید این از کجا اومد. اما چرا بجای px از em استفاده کنیم؟ ببینید اگر جهان وب یک نمونه ایده آل و یکسان بود یقینا از پیکسل استفاده می کردیم. اما این جور نیست، ما مرورگرهایی داریم که برخی فرآیندها رو نقض می کنن. اینترنت اکسپلرر ویندوز (IE/Win) به خوانندگانش اجازه نمی ده که المان هایی رو که سایزشون بر مبنای واحد پیکسل تنظیم شده، تغییر اندازه بدن. همون مثال فوق رو در نظر بگیرید هر دو واحد رو مثلا به 15px بنویسید در IE به منوی Viwe و از اونجا Text Size رو تغییر بدین، آیا تغییری مشاهده می کنید؟!

چه لزومی داره که خوانندگان فونت نوشته رو تغییر سایز بدهند؟ شاید خواننده ای نزدیک بین باشه، شاید از این لب تاب های خنده دار با رزولیشن بالا استفاده کنه یا واقعا با سایزی که شما انتخاب کردید چشمهاش خسته بشه. بنابراین مگر اینکه شما بدانید (فکر نکنید) که مخاطبان شما از IE استفاده نمی کنن یا هرگز تمایل ندارند سایز نوشته هایتان را تغییر بدهند. اما وقتی از em استفاده می کنید قابلیت تغییر سایز متن برای همه مروگرها وجود خواهد داشت.

کمی آن طرف تر:
نمی دونم تا چه حد با مفاهیم parent و child در المان های آشنا هستید. اما همین قدر بدونید که المان هایی که تحت یک المان دیگه واقع می شن یا به عبارتی زیر مجموعه ای از سری بالاتر قرار می گیرند child و خود سری اصلی رو parent می نامند. بنظرم این مفاهیم آشنا باشه و نیازی به شرح بیشتر نیست. تنها برای روشن تر شدن قضیه مثال زیر رو در نظر بگیرید:

<div id="page">
<h1>Hello Morteza</h1>
</div>

در الگوی بالا مشخصه page رو parent و تگ عنوان H1 رو child تعریف می کنیم. در مرورگرهایی که مبنی بر موزیلا (Mozilla) هستند هرگاه المان های عنوان یا سر فصل نظیر h1، h2 تا h6 یا بعبارتی heading elements ها به عنوان child در نظر گرفته بشن، فونت سایز المان parent رو به ارث می برند. اما سایر مرورگرها از این متد تبعیت نمی کنند و heading ها رو در اندازه های متفاوت نشون می دن. راه حل همه اینه که بیایم به المان های عنوان ها فونت سایزهای از پیش تععین شده نسبت بدیم. اما اینکه چه سایزی رو بر حسب واحد em انتخاب کنیم کمی مشکل خواهد بود.

فرض کنید در مثال بالا سایز فونت المان page برابر 12px باشه. شما می خواهید عنوان h1 فونت سایزی برابر 24px داشته باشه. چکار کنیم؟ چه طور بر حسب em تبدیلش کنیم؟ حتما می گید تقسیم بر ده می کنیم و بجاش می نویسیم 2.4em البته 62.5% رو هم در body لحاظ می کنیم. نه این اشتباهه ! امتحان کنید چرا که فونت سایز المان h1 تحت تاثیر فونت سایز المان page قرار خواهد گرفت. برای اینکه این واحد را به em معادل کنید یه فرمول خیلی جالب هست و اون اینکه فونت سایز المان child رو بر مبنای px بر فونت سایز المان parent بر مبنای px تقسیم می کنیم، فونت سایز المان child بر مبنای em بدست خواهد آمد. یعنی در این مثال فونت سایز المان h1 رو که به عنوان child لحاظ شده (عدد 24 پیکسل) بر فونت سایز المان page که به عنوان parent واقع شده (عدد 12 پیکسل) تقسیم می کنیم در نهایت فونت سایز المان h1 برمبنای em به صورت 2em خواهد بود.

موضوع رو گرفتید؟! امیدوارم. حرف هایی که بالا زده شد در مورد المان های تیتر یا عنوان یا همان heading ها بود. برای درک بیشتر موضوع به سراغ لیست آیتم ها ( آیتم های لیست شده) می رویم. قاعده زیر را در نظر بگیرید این به ما می گوید که تمام آیتم هایی که در زیر مجموعه المان page قرار دارند باید سایزشان 10px باشد. (فراموش نکنید فونت سایز المان page همان 12px مثال بالا در نظر گرفته شده است)

#page li { font-size:0.8333em }

چرا 10px؟ طبق فرمول 10px تقسیم بر 12px می شود 0.8333 em اما به نظر شما وقتی یک لیست در زیر مجموعه یک لیست دیگر قرار بگیرد چه اتفاقی خواهد افتاد؟ کوچکتر خواهد شد اما چرا؟ چون قاعده بالا به ما می گه هر لیست آیتمی که در زیر مجموعه المان page واقع بشه، باید 0.8333 ام سایز المان parent خودش باشه. بنابراین دوباره ما به یک قاعده ای نیاز داریم که تاثیر این کاهش ارثی رو از بین ببره. الگوی زیر این کار رو انجام می ده:

li li {font-size:1em}

این به ما می گه که هر لیست آیتمی که در زیر مجموعه یه لیست آیتم دیگر واقع شد، باید سایزی یکسان با parent خودش داشته باشه. بهتره برای جلوگیری از آشفتگی و سر درگمی طرح از همون اول یک قاعده برای تمامی انتخابگر های child ای که استفاده می کنید به شکل زیر لحاظ کنید:

li li, li P, TD P, BLOCKQUOTE P {
font-size:1em
}

اگر این پست رو تا آخر خوندین و چیزی هم یاد گرفتید یا از قبل یاد داشتید و از یادتون رفت حتما در نظرات مطرح کنید تا کیفیت مطالب رو تغییر بدم. اگر قسمتی از این پست رو هم متوجه نشدین همین جا مطرح کنید بهتر از ایمیل زدن خواهد بود. موفق باشید.

• + How to size text using ems
  + Effective Style with em
  + CSS Font Size Explained
  + Font Sizing by Eric Meyer
  + Sitepoint Forums: Best Practice for font-size
  + Webmaster world forums: PX to em and more

+ لیست منابعی که در این آموزش بیشتر کمکتان خواهند کرد.