بررسي تاثير CSS3 در نمايش وب‌سايت‌ها
چهارشنبه 2 تیر 1389 12:02 AM
درک مدل باکس CSS
اين مفهوم يکي از اولين چيزهايي است که براي رسيدن به طرح‌بندي‌هايي با امنيت و کارايي بالا و قابل نمايش در مرورگرهاي مختلف، بايد کاملا با آن آشنا باشيد. خوشبختانه فهم مدل باکس سخت نيست و معمولا در تمام مرورگرها (به‌جز شرايط خاصي که در برخي از نسخه‌هاي خاص اينترنت اکسپلورر به‌‌وجود مي‌آيد) به يک شکل کار مي‌کند. مدل باکس CSS وظيفه محاسبه موارد زير را دارد:
- هر عنصر بلاک‌شده، به تنهايي چقدر فضا اشغال مي‌کند؟
- مرزها (border) و حاشيه‌ها (margin) با هم تطابق دارند يا همديگر را مختل مي‌کنند؟
- ابعاد يک باکس چيست؟
- در برخي موارد، محل قرار گرفتن باکس با درنظر گرفتن جايگاه بقيه عناصر صفحه كجاست؟
قواعد پايه‌اي مدل باکس CSS عبارتند از:
- اندازه يک عنصر، اصولا به‌طور مستطيل محاسبه مي‌شود.
- ابعاد يک عنصر بلاک‌شده، به‌وسيله عرض، ارتفاع، متن‌هاي اضافي، مرزها و حاشيه‌ها.
- اگر ارتفاعي تعيين نشده بود، ارتفاع عنصر بلاک‌شده، ارتفاع محتواي آن به‌علاوه متن‌هاي اطراف آن خواهد بود.
- اگر عرض تعيين نشده بود، يک باکس ثابت، براي اندازه‌گيري عرض والدش منهاي متن‌هاي اضافي، بسط داده خواهد شد.
برخي چيزهاي مهمي که در برخورد با عناصر بايد در نظر داشته باشيد:
- اگر عرض يک باکس روي 100درصد تنظيم شده بود، نبايد حاشيه، متن اضافي يا مرز داشته باشد. در غير اين صورت در والدش سرريز مي‌کند (overflow).
- حاشيه‌هايي که از نظر عمودي نزديک هم هستند، مي‌توانند سبب برخي به‌هم‌ريختگي‌هاي پيچيده شوند که مشکلاتي را در طرح‌بندي ايجاد کنند.
- قوانين و اصول بالا، در حالتي صادق هستند که صفحه‌اي که عناصر را در بر گرفته، در حالت استاندارد رندر شده باشد.
درک تفاوت بين بلاک و داخل خطي
براي برنامه‌نويسان باتجربه، اين تفاوت واضح است. ولي به هرحال يکي از مهم‌ترين بخش‌هايي است که اگر کاملا درک شود باعث مي‌شود يک لامپ بالاي سر شما روشن شود، بسياري از سردردها خوب و خيال‌تان از بابت ساخت طرح‌بندي‌هاي چند مرورگره راحت شود.
برخي از قواعد اساسي که عناصر بلاک‌شده را از اين‌لاين متمايز مي‌کنند:
عناصر بلاک‌شده اين ويژگي‌ها را دارند:
- به‌طور پيش‌فرض و طبيعي، در حالت افقي در والد خود جا مي‌گيرند. پس ديگر نيازي به تنظيم عرض 100درصد نداريم.
- به‌طبع و به‌طور پيش‌فرض، از گوشه سمت چپ (و در زبان فارسي از گوشه سمت راست) باکس والد و پايين عناصر بلاک‌شده قبلي، آغاز مي‌شوند.
عناصر اين‌لاين نيز اين ويژگي‌ها را دارند:
- تنظيمات عرض و ارتفاع را در نظر نمي‌گيرند.
- با متن، همراه، و تابع ويژگي‌هاي چاپي مثل فضاهاي خالي، اندازه فونت و فضاي حروف هستند.
- مي‌توانند با استفاده از ويژگي تنظيم عمودي (vertical-align) تنظيم شوند در حالي‌که عناصر بلاک‌شده نمي‌توانند.
- کمي فضاي خالي طبيعي زير خود دارند که مي‌توانند عناصر متني که تا زير خط ادامه پيدا مي‌کنند (مثل «ل» در فارسي و «g» در انگليسي) را در خود جاي دهند.
- اگر شناور باشد به يک عنصر بلاک‌شده تبديل مي‌شود.
درك شناور و مسطح بودن
براي طرح‌بندي‌هاي چند‌ستونه که نگهداري آنها ساده است، بهترين روش، استفاده از شناورهاست. داشتن درك دقيق از چگونگي کارکرد شناورها، فاکتور مهم ديگري براي رسيدن به يک طراحي چند مرورگره است. يک عنصر شناور مي‌تواند در چپ يا راست قرار بگيرد. در نتيجه عنصر شناور آن‌قدر در يک جهت حرکت مي‌کند تا به‌انتهاي والد يا انتهاي عنصر شناور ديگر برسد. تمام محتواي اين‌لاين و غيرشناور که در زير عنصر شناور ظاهر مي‌شوند، در جهت عنصر که خلاف مسير حرکت آن است حرکت مي‌کنند.
برخي از موارد مهم که بايد در استفاده از اين نوع عناصر در نظر داشته باشيد:
- عناصر شناور از روند سطوح بلاک‌شده ديگر و عناصر غيرشناور حذف شده‌اند. به بيان ديگر اگر يک باکس را در سمت چپ به‌صورت شناور قرار دهيد، يک پاراگراف دنباله‌رو که شناور نيست، در پشته، پشت سر عنصر شناور قرار مي‌گيرد و هر متني که در پاراگراف قرار دارد، در اطراف عنصر شناور حرکت مي‌کند.
- براي اين‌که محتوايي اطراف يک عنصر شناور حرکت کند، بايد يا اين‌لاين باشد يا در همان مسير شناور شود.
- يک عنصر شناور بدون عرض تعيين‌شده، به اندازه محتوايش درخواهد آمد بنابراين معمولا بهتر است عرض آن تعيين شود.
- اگر يک عنصر بلاک‌شده فرزندان شناور داشته باشد، متلاشي خواهد شد.
- عنصري که مسطح باشد، از حرکت به دور عناصر شناور اجتناب مي‌کند.
- عنصري که هم مسطح و هم شناور باشد، عناصري که پيش از آن مي‌آيند را پاک مي‌کند.
محمدحسين کردوني
چهار راه برای رسیدن به آرامش:
1.نگاه کردن به عقب و تشکر از خدا 2.نگاه کردن به جلو و اعتماد به خدا 3.نگاه کردن به اطراف و خدمت به خدا 4.نگاه کردن به درون و پیدا کردن خدا
پل ارتباطی : samsamdragon@gmail.com
تالارهای تحت مدیریت :
مطالب عمومی کامپیوتراخبار و تکنولوژی های جدیدسیستم های عاملنرم افزارسخت افزارشبکه
