نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

۳ مطلب با کلمه‌ی کلیدی «css» ثبت شده است

آموزش Position در CSS

امیرمسعود ایرانی | شنبه, ۱۰ آبان ۱۳۹۳، ۰۵:۵۴ ب.ظ | ۱ نظر

تعیین محل عناصر HTML با شیوه‌های مختلفی امکان‌پذیر است.

مهم‌ترین ویژگی شیوه‌نامه‌های CSS برای مکان‌یابی عنصرها در HTML، ویژگی Position است.

این ویژگی مقدارهای Static، Relative، Absolute و Fixed را می‌پذیرد که در ادامه هر یک را به اختصار مرور خواهیم کرد.


Static

این مقدار مقدار پیش‌فرض است و محل عنصرها را بر اساس محل قرارگیری آن‌ها در محتوای HTML‌ تعیین می‌کند. در حقیقت مقدار دهی Position با Static سبب می‌شود مرورگر محل عنصر را خود تعیین نماید.


Relative

مقدار Relative به معنی «وابسته» در هنگامی کاربرد دارد که بخواهیم محل قرارگیری عنصر را وابسته به محلی که مرورگر برای آن در نظر گرفته تغییر دهیم. مثلا می‌توان یک عنصر را از محل اصلی ۱۰ پیکسل به سمت راست و ۱۰ پیکسل به سمت پایین جابجا کرد. جابجا کردن عنصر در این روش با مقداردهی به ویژگی‌های Top، Bottom،‌Left و Right امکان‌پذیر است.

جابجا کردن عنصرهایی که به صورت Relative مقداردهی شده‌اند، محل اصلی آن عنصر را خالی نمی‌کند و فضای قبلی همچنان اشغال شده باقی می‌ماند.


Absolute

برای جابجا کردن یک عنصر وابسته به عنصر والد، از مقدار Absolute استفاده می‌شود. برای مثال می‌توان محل یک تصویر را ۱۰ پیکسل از سمت چپ و ۱۰ پیکسل از سمت پایین عنصر والد مشخص نمود. برای اینکه مشخص شود مکان‌یابی نسبت به کدامیک از عنصرهای والد انجام می‌پذیرد، لازم است تا عنصر والد موردنظر با ویژگی Relative مقداردهی شود.

به عبارت دیگر چنانچه بخواهیم، یک عنصر که چندین والد پی در پی دارد، را نسبت به یکی از والدهای آن جانمایی کنیم، ویژگی Position آن والد را مساوی Relative قرار می‌دهیم.

علاوه بر Relative، سایر مقادیر قابل قبول برای Position به جز Static نیز همین اثر را به دنبال دارند. ولی مقدار دهی جز با Relative اثرات جانبی دیگری نیز دارد که ممکن است مورد نیاز نباشند.


Fixed

با تعیین این مقدار برای Position، عنصر وابسته به صفحه‌ی مرورگر مکان‌یابی خواهد شد و محل اصلی آن خالی می‌گردد. کاربرد این مقدار هنگامی است که بخواهیم یک عنصر همیشه فارغ از محل میله‌های جابجایی کنار صفحه، در محلی خاص قابل مشاهده باشد.

نمونه‌های زیادی از این شیوه‌ی مقداردهی در سایت‌های مختلف قابل مشاهده است. برای مثال، پیام‌های خوش‌آمدگویی، پیشنهادهای جذاب، منوهای سایت و بخش‌های دیگر از این جمله هستند

  • امیرمسعود ایرانی

بهینه‌سازی شیوه‌نامه‌های( CSS ) موجود در یک صفحه‌ی وب

امیرمسعود ایرانی | جمعه, ۱۶ خرداد ۱۳۹۳، ۱۱:۱۱ ب.ظ | ۰ نظر

 با زیاد شدن رقابت در تولید سایت‌های باکیفیت و بهینه، دانستن چندین نکته در هنگام تولید شیوه‌نامه‌ها(‌CSS) جزء ضروریات به حساب می‌آیند
در این مطلب، موارد مورد نیاز به صورت فهرست درج خواهند شد

یکی کردن شیوه‌نامه‌ها
درخواست هر فایل از سرور، نیازمند صرف زمان و سبب ایجاد تاخیر در بارگزاری و نمایش سایت است. بنابراین بهتر است این فایل‌ها تا حد امکان با یکدیگر ادغام شوند و در یک درخواست به مشتری ارسال گردند

محل قرارگیری شیوه‌نامه‌ها
بهترین محل برای قراردادن این فایل‌ها، ابتدای فایل html و در بخش head است
چنانچه مرورگر پیش از مشاهده‌ی محتوا، شکل قالب‌بندی آن‌ها را بداند، فرآیند‌های تکراری برای نمایش html به حداقل می‌رسند و کاربر در زمان کوتاه‌تری اطلاعات مورد نیاز را به شکل مناسب مشاهده خواهد کرد.

حذف قانون‌های اضافی
معمولا در طول طراحی یک سایت، قانون‌های زیادی برای بخش ظاهری یک سایت ایجاد می‌شوند. به دلایل مختلف ممکن است این قانون‌ها حذف یا تغییر کنند. ولی تعریف قانون در فایل css باقی مانده باشد.
مرورگرهای مدرن امروزی، ابزارهای برای شناسایی این قانون‌ها در اختیار برنامه‌نویس قرار می‌دهند که با استفاده از آن می‌توان حجم فایل‌های css را به حداقل ممکن رساند و سرعت بارگزاری سایت را تا جایی که ممکن است افزایش داد.

ساده‌سازی قانون‌ها
برای انتخاب یک عنصر در html روش‌های مختلفی وجود دارد. سعی کنید همیشه، کوتاه‌ترین و ساده‌ترین روش را برای انتخاب یک عنصر مشخص کنید.

شیوه‌نامه‌های درون‌خطی
اگرچه قراردادن شیوه‌نامه‌ها داخل فایل html و مقابل ویژگی style باعث بی‌نظمی در فایل html می‌شود. ولی در بعضی مواقع، درج شیوه‌نامه‌های کوتاه در محل‌های خاص می‌تواند در کارایی سایت اثر قابل توجهی داشته باشد.
برای مثال جستجوی تصویر سایت گوگل، چند تصویر ابتدایی را با استفاده از شیوه‌نامه‌های درون خطی درون مرورگر نمایش می‌دهد. در نتیجه، در همان زمان که کاربر تصاویر را جستجو می‌کند، تصویرهای ابتدایی هم فورا برای او به نمایش در می‌آیند.

بارگزاری شیوه‌نامه‌ها از دامنه‌های دیگر
به دلیل محدودیت‌های موجود در تعداد درخواست‌ها از یک دامنه، چنانچه تمامی فایل‌های شما از یک دامنه بارگزاری شوند، ممکن است تاخیرهایی ناخواسته در دریافت اطلاعات به وجود آید.
علاوه بر تاخیرهای احتمالی، استفاده از دامنه‌های جایگزین می‌تواند یک ویژگی مثبت دیگر هم داشته باشد. و آن عدم ارسال cookieها به دامنه‌های جایگزین است. مرورگرها، تمامی cookieهای متعلق به سایت فعلی را همراه هر درخواست به سرور ارسال می‌کنند. چنانچه فایل‌های css از یک دامنه‌ی دیگر فراخوانی شوند، cookieهای دامنه‌ی فعلی همراه درخواست فرستاده نمی‌شوند و با کاهش حجم درخواست‌ها، سرعت افزایش پیدا خواهد کرد.
سایت‌های بزرگ مثل گوگل از این تکنیک استفاده‌ی زیادی می‌کنند.

  • امیرمسعود ایرانی

تعیین مقدار border-radius در LESS با هشت مقدار

امیرمسعود ایرانی | چهارشنبه, ۹ بهمن ۱۳۹۲، ۰۲:۴۸ ق.ظ | ۰ نظر

کامپایلر LESS به طور پیش‌فرض علامت ممیز «/» را به عنوان تقسیم‌کننده می‌شناسد. بنابراین تعریف ۸ مقدار در مقابل border-radius که لازمه‌اش استفاده از علامت ممیز بین چهار عدد اول و چهار عدد دوم است، با خطا مواجه می‌شود

برای حل این مشکل کل ۸ عدد را به شکل زیر بنویسید:


border-radius: ~"10px 10px 10px 10px / 10px 10px 10px 10px";
  • امیرمسعود ایرانی