Tailwind CSS و کلاس های جدید پس زمینه

همه فیلتر های زبان CSS در گذشته توسط Tailwind پشتیبانی نمی شدند، اما با انتشار نسخه 2.1 آن و مجموعه ای از کلاس های کاربردی مفید، از جمله کلاس های فیلتر پس زمینه جدید هم اکنون برای استفاده در دسترس ما است. دستیابی به افکت شیشه ای روی نوار ناوبری خیلی ساده است، فقط باید از کلاس های کاربردی، فیلتر پس زمینه و پس زمینه تار در Tailwind CSS استفاده کنیم و کمی شفافیت را تنظیم کنیم.

نکته: قبل از حرکت ب سمت ادامه مطلب، مطمئن شوید که نسخه Tailwind v2.1 را نصب کرده اید!

ساختار اصلی نوار ناوبری شیشه ای قبل از اعمال Tailwind

بیایید با استفاده از عنصر معنایی «nav» و پر کردن آن با چند آیتم شروع کنیم.

<nav>
  <div>
    <div>
      <span>My Logo</span>
      <div>
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

قبل از اعمال افکت شیشه ای با Tailwind، بیایید نوار ناوبری را به طوری سبکی تنظیم کنیم تا در واقع شبیه یک نوار ناوبری مرتب باشد.

<nav className="sticky top-0 z-10 bg-white">
  <div className="max-w-5xl mx-auto px-4">
    <div className="flex items-center justify-between h-16">
      <span className="text-2xl text-gray-900 font-semibold">Logo</span>
      <div className="flex space-x-4 text-gray-900">
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

بسیاری از این سبک ها خود توضیحی هستند، اما اجازه دهید به چند نکته اشاره کنم:

• روی عنصر nav یک رنگ پس زمینه اعمال شده است. اگر رنگ پس زمینه وجود نداشته باشد، کلاس های فیلتر چیزی برای محو کردن نخواهند داشت.
• عنصر nav چسبنده است، اگر وقتی صفحه را به پایین اسکرول می کنیم نوار را نبینیم، هیچ فایده ای ندارد که بخواهیم به نوار ناوبری حالتی شیشه ای بدهیم.
• یک z-index برای ناوبری اعمال می شود، فقط برای اینکه سایر عناصر را از بین نبرند.

در این مرحله، نوار ناوبری باید چیزی شبیه به تصویر بالا باشد. اگر صفحه را به پایین اسکرول کنید، باید نوار به بالای صفحه بچسبد.

استفاده از کلاس های فیلتر و تاری پس زمینه در Tailwind

اکنون که ساختار اصلی ناوبری وجود دارد، بیایید به آن یک حالت جادویی اضافه کنیم، برای این کار باید کلاس های ابزار فیلتر پس زمینه و پس زمینه تار را به عنصر nav اضافه کنید.

<nav className="... backdrop-filter backdrop-blur-lg">.....</nav>

اگر در این مرحله صفحه را به پایین اسکرول کنید، به نظر می رسد چیزی تغییر نکرده است. اگرچه کلاس های کاربردی Tailwind در حال کار هستند، ما باید کدورت پس زمینه نوار ناوبری را تنظیم کنیم تا حالت شیشه ای آن آشکار شوند.

هرچه کدورت پس زمینه کمتر باشد، محتوای بیشتری از طریق عنصر نشان داده می شود. با خیال راحت کمی با مقدار آن بازی کنید، تا مقدار دلخواهتان را پیدا کنید. مثلاً من کلاس bg-opacity-30 را به نوار ناوبری خود اضافه کرده ام.

<nav className="...bg-opacity-30">.....</nav>

نوار ناوبری اکنون حالتی شیشه ای دارد و جلوه جالبی را بدون از بین بردن تجربه کاربر در وب سایت به آن اضافه می کند. ما می توانیم همین جا توقف کنیم، اما یک کار دیگر هم وجود دارد که می توانیم انجام دهیم.

تا اکنون ما موفق به شیشه ای کردن نوار ناوبری به کمک Tailwind شدیم، اما همانطور که در تصویر پایین می بینید تشخیص نوار ناوبری شیشه ای مات از پس زمینه وب سایت دشوار است.

افزودن یک حاشیه پایین تیره رنگ اجازه می دهد تا پس زمینه با نوار ناوبری تار تضاد ایجاد کند و به صورت بصری انتهای عنصر را مشخص کند. این حاشیه بسیار ظریف است، اما یک لایه کاملاً جدید به طراحی کلی ما اضافه می کند. این کار را با اضافه کردن قسمت پایین انجام می دهیم.

<nav className="...border-b border-gray-200">.....</nav>

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

مشکلات نوار ناوبری شیشه ای در فایرفاکس

درست است. اگر تغییرات خود را در فایرفاکس پیش نمایش کنید، خواهید دید که تاری اصلاً نشان داده نمی شود. به نظر می رسد، فایر فاکس از CSS پس زمینه تاری پشتیبانی نمی کند. پس راه حل چیست؟

خوشبختانه، سام سلیکوف در مورد این موضوع یک توییت سفارشی را در توییتر نوشته و پست کرده است. این توییت کاربرانی را هدف قرار می دهد که از فایرفاکس استفاده می کنند. برای اینکه بتوانید شفافیت نوار ناوبری را در این مرورگر افزایش دهید، فایل tailwind.config.js را باز کنید و کد زیر را در قسمت plugins اضافه کنید. (برای ایجاد تغییرات در tailwind.config.js می توانید به مقاله مربوط به فریم ورک Tailwind که در ابتدای مقاله به آن پیوند داده بودیم مراجعه کنید.)

const plugin = require('tailwindcss/plugin');
module.exports {
    ...
    plugins: [
        ...
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix ()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
}

حالا به قسمت مربوط به نوار ناوبر برگردید و کلاس زیر را وارد کنید:

<nav className="...firefox:bg-opacity-90">.....</nav>

اگر چه نوار ناوبری اکنون هم کاملاً تار نیست، اما کدورت کمی افزایش می یابد اما همچنان جلوه شفاف خود را حفظ می کند.

نتیجه:

Tailwind CSS به بهبود خود ادامه می دهد و با انتشار نسخه 2.1، بسیاری از فیلتر های CSS اکنون با کلاس های کاربردی مرتبط پشتیبانی می شوند و شما به راحتی می توانید از آن برای طراحی های شیشه ای استفاده کنید درست مانند همین نوار ناوبری شیشه ای که ما طراحی کردیم.

شاید بپرسید چه زمانی می توان از glassmorphism استفاده کرد؟ در حالی که ساخت کل رابط های کاربری با استفاده از این مد طراحی می تواند وسوسه انگیز باشد، اما لطفاً توجه داشته باشید که به دلیل ماهیت نیمه شفاف آن نگرانی هایی در مورد دسترسی دارد، پس اگر از طراحی شیشه ای استفاده می کنید، از آن کم استفاده کنید.

منبع:

braydoncoyer.dev

نوشته طراحی نوار ناوبری شیشه ای (Glassmorphism) با کلاس های Tailwind CSS اولین بار در ممتاز دیزاین. پدیدار شد.

گرید CSS چیست؟

گرید CSS توسط مایکروسافت به گروه کاری CSS پیشنهاد شد و پیش نویس گرید CSS برای اولین بار در آوریل 2011 منتشر شد. با گذشت زمان، این مشخصات به لطف بازخورد توسعه دهندگان و فروشندگان که با هم همکاری می کنند تا گرید CSS را به یک راه حل واقعاً مؤثر برای طرح بندی تبدیل کنند، بهبود یافته است.

گرید به عنوان افزونه ای برای CSS عمل می کند که به شما امکان می دهد اندازه و محل قرارگیری اقلام گرید را کنترل کنید. می توانید از مدیا کوئری ها برای انطباق خودکار گرید های خود با زمینه های مختلف استفاده کنید.

مزایای ساخت و استفاده از گرید CSS

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

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

یک ویژگی قدرتمند قرار دادن خودکار به شما امکان می دهد به راحتی فضای موجود را پر کرده و نیازی به محاسبات پیچیده نداشته باشید. گرید حتی به شما این امکان را می دهد تا مواردی را که نیاز دارید با یکدیگر همپوشانی کنید، که قطعاً با جداول امکان پذیر نیست. اکنون که با گرید CSS آشنا شدید، بیایید نحوه استفاده از آن را بررسی کنیم.

نحوه ساخت و استفاده از گرید CSS

W3Schools نشان می دهد که اگر می خواهید طرح گریدی را تنظیم کنید، باید یک عنصر div والد (ظرف گرید) و یک یا چند عنصر div (آیتم های گرید) ایجاد کنید. تنظیم ویژگی نمایش یک عنصر HTML، آن را به یک ظرف گرید تبدیل می کند.

آیتم های گرید، فرزندان مستقیم ظرف گرید هستند. آن ها به صورت عمودی به ستون و به صورت افقی به ردیف مرتب شده اند. فاصله بین یک سطر و یک ستون را شکاف می نامند. با استفاده از این ویژگی ها می توانید فاصله را تنظیم کنید:

• grid-column-gap، که فاصله بین ستون ها را مشخص می کند.
• grid-row-gap، که فاصله بین ردیف ها را مشخص می کند.
• grid-gap، که یک ویژگی مختصر برای grid-column-gap و grid-row-gap است.

در بین ستون ها و سطر ها، خطوطی به ترتیب خطوط ستون و خطوط ردیف وجود دارد. ما می توانیم نمونه ای از آن را در زیر مشاهده کنیم.

هنگام قرار دادن یک مورد گرید در داخل یک ظرف، شما شماره خطوط را ارجاع می دهید.

چگونه می توان یک گرید را ساخت و در CSS متمرکز کرد؟

گرید دو بعدی است، بدین معنی که طرح با دو محور تکمیل می شود: محور y (محور بلوک) و محور x (محور درون خطی).

در CSS، از ویژگی align برای تعریف محور بلوک استفاده می شود در حالی که ویژگی justify محور درون خطی را تعریف می کند.

برای شروع متمرکز کردن موارد گرید، از ویژگی align-items استفاده کنید. برخی از مقادیری که می توانید به این ویژگی اختصاص دهید عبارتند از start ،end و stretch. هنگامی که مقدار ویژگی align-items شروع به کار می کند، این موارد را در ابتدای عمودی ناحیه گرید مربوطه قرار می دهد در حالی که آن را در انتها قرار می دهد. هنگامی که مقدار stretch می شود، آیتم ها در سراسر گرید گسترده می شوند.

ویژگی justify-items مشابه ویژگی align-items عمل می کند و مقادیر یکسانی را در محور درون خطی می پذیرد. برای هدف قرار دادن فقط یک مورد تا بتوانید آن را در مرکز قرار دهید، به ترتیب از ویژگی های align-self و justify-self در سطح مورد استفاده کنید. آخرین مرحله این است که گرید خود را نسبت به طرح موبایل ریسپانسیو کنید. اگر یک نمایش شگفت انگیز ایجاد کنید، می خواهید از طریق رابط تلفن همراه نیز قابل اشتراک گذاری باشد.

چگونه می توان هنگام ساخت یک گرید CSS را ریسپانسیو کرد؟

یکی از بهترین ویژگی های گرید این است که نسبتاً از ابتدا ریسپانسیو است. W3Schools این دستورالعمل های اضافی را برای تضمین ریسپانسیو بودن هنگام استفاده از گرید به اشتراک می گذارد. برای ساخت یک گرید CSS واکنش گرا، ابتدا ویژگی اندازه باکس همه عناصر HTML را در border-box قرار دهید. این شامل Padding و Margin به عرض و ارتفاع عناصر است.

این کد را به CSS خود اضافه کنید:

* { box-sizing: border-box; }

در مرحله بعد، یک صفحه وب ریسپانسیو ساده برای تمرین ایجاد می کنید:

برای یک صفحه وب تنها با دو ستون، مثال بالا کافی است. با این حال، اگر می خواهید کنترل بیشتری بر صفحه وب داشته باشید، می توانید از 12 ستون در گرید استفاده کنید. ابتدا باید محاسبه کنید که هر ستون چند درصد را اشغال می کند. به عنوان مثال، 100 درصد یا 12 = 8.33% در هر ستون. سپس، برای هر ستون، “-class=”col، یک کلاس ایجاد کنید، به شرح زیر:

ما در ابتدای این مقاله به طرح بندی های مبتنی بر Float اشاره کردیم. اگرچه یک طرح گرید CSS کاملاً بر اساس این سیستم نیست، اما از برخی ویژگی های مشابه استفاده می کند. در این مثال، ستون های خود را طوری تنظیم می کنید که با پدینگ 15 پیکسل به سمت چپ شناور شوند، که به هر عنصر امکان می دهد فاصله مناسب داشته باشد.

هر سطر در یک <div> پیچیده شده است و تعداد ستون های داخل یک سطر همیشه به 12 می افزاید:

در مرحله بعد، باید مطمئن شوید که float را پاک کرده اید، اطمینان حاصل کنید که همه ستون های داخل ردیف در جریان صفحه قرار دارند:

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

مثال هایی برای ساخت گرید CSS

اکنون که ما اصول اولیه گرید CSS را پوشش دادیم، بیایید به نمونه های اولیه طرح بندی گرید CSS نگاه کنیم. برخی از نمونه های زیر توسط طراح وب سایت راشل اندرو تهیه شده و بر همین اساس ذکر شده است.

طرح بندی قرارگیری مبتنی بر خط

هنگام ساخت گرید های CSS، قرار دادن موارد بر روی گرید بر اساس خطوط ستون و سطر معمول است. مثال زیر یک گرید ساده با سه ستون و دو سطر است. این شامل شش مورد است. در اینجا HTML است که گرید را تعریف می کند. توجه داشته باشید که هر مورد گرید نام کلاس مخصوص به خود را دارد. این به شما امکان می دهد از Selector های کلاس برای اعمال یک ظاهر طراحی منحصر به فرد برای هر مورد گرید در CSS خود استفاده کنید.

در زیر، کد های CSS است که محل قرارگیری شش مورد گرید را مشخص می کند. توجه داشته باشید که شش مجموعه قانون وجود دارد که خصوصیات grid-column-start ،grid-column-end ،grid-row-start و grid-row-end را با شماره خط برای هر مورد گرید تعریف می کند.

در اینجا نتیجه را در front-end مشاهده می کنید:

استفاده از مختصر های Grid-Row و Grid-Column

ما می توانیم با استفاده از ویژگی های مختصر grid-column و grid-row، طرح بندی گرید را از بالا ایجاد کنیم. این ویژگی های مختصر نویسی می تواند در وقت شما صرفه جویی کرده و کد شما را تمیزتر نشان دهد. به جای نوشتن خصوصیات grid-column-start و grid-column-end در دو خط جداگانه، می توانید آن ها را در یک خط زیر مختصر ستون گرید ترکیب کنید. برای تعریف این ویژگی مختصر نگاری، شماره اول را خط ستون محل شروع آیتم grid قرار دهید و شماره دوم نشان دهنده خط ستون جایی است که مورد grid به پایان می رسد. مقادیر را با یک اسلش جدا کنید.

شما می توانید همین کار را برای ویژگی مختصر خط گرید انجام دهید. در اینجا همان CSS از مثال بالا با استفاده از ویژگی های مختصر grid-column و grid-row بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از ویژگی مختصر Grid-Area Property

ما همچنین می توانیم با استفاده از ویژگی مختصر ناحیه گرید، ساخت گرید CSS را شروع کنیم. این ویژگی مختصر نویسی می تواند با نیاز به کد کمتر، زمان بیشتری را در شما ذخیره کند. فقط به خاطر سپردن ترتیب مقادیر ویژگی کمی سخت تر است.

برای هر یک از شش مجموعه قانون، تنها کاری که باید انجام دهید این است که ویژگی grid-area را با چهار مقدار تعریف کنید. ترتیب مقادیر به شرح زیر است:

خط سطر در جایی که مورد گرید شروع می شود / خط ستون در جایی که مورد گرید شروع می شود / خط سطر در جایی که مورد گرید به پایان می رسد / خط ستون جایی که مورد گرید به پایان می رسد.

در اینجا همان CSS از مثال بالا با استفاده از ویژگی مختصر grid-area بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از نام سطر و ستون

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

ابتدا، در زیر selector.wrapper، ویژگی grid-template-columns و grid-template-rows را خواهید یافت. در مثال های قبلی، فقط ویژگی grid-template-columns با 100 پیکسل سه بار تعریف شد. به این معنی که اندازه هر ستون برابر 100px عرض بود. در اینجا نحوه نمایش آن در CSS آمده است:

برای این مثال، ما باید ویژگی های grid-template-column و grid-template-row را با نام خطوط و مقادیر تعریف کنیم. هر ستون به ترتیب “col1-start” “col2-start” و “col3-start” نامگذاری شده و روی 100px تنظیم می شود. هر سطر به ترتیب “row1-start” و “row2-start” نامگذاری شده و روی “auto” تنظیم می شود. در اینجا کد CSS آن آمده است:

.wrapper {

    display: grid;

    grid-gap: 10px;

    grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px;

    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];

    background-color: #fff;

    color: #444;

}

اکنون در اینجا همان بخش کد CSS از مثال بالا آمده است که با استفاده از ویژگی های مختصر نویسی و نام خطوط گرید بازنویسی شده است.

    .a {

        grid-column: col2-start;

        grid-row: row1-start;

    }

    .b {

        grid-column: col2-start;

        grid-row: row2-start;

    }

    .c {

        grid-column: col3-start;

        grid-row: row2-start ;

    }

    .d {

        grid-column: col1-start ;

        grid-row: row1-start ;

    }

    .e {

        grid-column: col1-start ;

        grid-row: row2-start ;

    }

    .f {

        grid-column: col3-start ;

        grid-row: row1-start ;

    }

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

لی اوت قرارگیری مبتنی بر خط که بیش از یک مسیر گریدی را شامل می شود

اکنون که روش های مختلفی را برای نوشتن کد برای طرح بندی قرارگیری مبتنی بر خط درک کرده ایم، بیایید یک مثال پیچیده تر را در نظر بگیریم: موقعیت یابی مواردی که بیش از یک مسیر گرید را پوشش می دهد. گرید زیر فقط شامل چهار مورد گرید خواهد بود. یک مورد بیش از یک ستون و یک مورد دیگر بیش از یک سطر خواهد بود.

در اینجا HTML است که گرید را تعریف می کند.

در زیر کد CSS است که محل قرارگیری چهار آیتم گرید را مشخص می کند. توجه داشته باشید که از ویژگی های مختصر grid-column و grid-row استفاده می شود و در بیشتر موارد فقط یک مقدار تعریف شده است. دلیل این امر این است که شما فقط باید مقادیر شروع و پایان را برای موارد گریدی که می خواهید چندین ویژگی را در بر گیرد، تعریف کنید.

برای مثال، برای داشتن آیتم گرید A در دو ستون، می توانید ویژگی خط مختصر ستون گرید را با تبدیل مقدار اول به “1” و مقدار دوم به “3” تعریف کنید. برای داشتن آیتم B در دو ردیف، می توانید ویژگی خط مختصر گرید را با ایجاد مقدار اول “1” و مقدار دوم “3” تعریف کنید.

در اینجا نتیجه را در قسمت جلویی مشاهده می کنید:

استفاده از کلمه کلیدی Span

ما می توانیم با استفاده از کلمه کلیدی span همان طرح بندی گرید را از بالا ایجاد کنیم. به جای نوشتن مقدار نهایی برای ویژگی های خط ستون و خط گرید در دو مورد که بیش از یک ویژگی گرید را شامل می شود، باید “span” را بنویسید و تعداد ستون ها یا گرید هایی را که می خواهید مورد مورد نظر در آن قرار گیرد، درج کنید.

در اینجا همان CSS از مثال بالا با استفاده از کلمه کلیدی span بازنویسی شده است. موارد A و B به ترتیب دو ستون و دو ردیف را شامل می شوند، بنابراین مقدار نهایی “2” است. توجه داشته باشید که بسیاری از ویژگی ها فقط با یک مقدار تعریف می شوند. در این حالت، پیش فرض گستردگی یک ستون یا سطر فرض می شود.

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

طرح گرید جام مقدس

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

در زیر نگاهی به کد و طرح بندی که “طرح مقدس جام مقدس” ایجاد شده است می اندازیم.

در اینجا HTML سرفصل، نوار کناری نویگیشن، محتوای اصلی (عنصر )، نوار کناری سمت راست (عنصر ) و پاورقی را تعریف می کند. توجه داشته باشید که در صورت تمایل می توانید مورد را با عنصر دیگری جایگزین کنید.

<div class="grid">
<header>
Header
</header>

<nav>
Navigation
</nav>

<article>
Article
</article>

<aside>
Right Sidebar
</aside>

<footer>
Footer
</footer>
</div>

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

.grid {
display: grid;
grid-template-columns: repeat (3, 1fr);
grid-template-rows: 30% 200px auto;
grid-gap: 1em;
}

.grid > * {
display: flex;
align-items: center;
justify-content: center;
}

اکنون وقت آن رسیده است که محتوا را سبک بندی کنیم. ابتدا رنگ پس زمینه و پدینگ عنصر سرصفحه، نام، متن، نوار کنار و پاورقی را تغییر می دهم. سپس من خصوصیات grid-column-start و -end را روی 1 و 4 قرار می دهم تا طول گرید را باز کنند. در نهایت، حداقل عرض را برای عنصر مقاله تعیین می کنم تا محتوای اصلی بیشتر صفحه را اشغال کند.

header,
nav,
article,
aside,
footer {
background: lightgray;
padding: 1em;
}

header, footer {
grid-column: 1 / 4;
}

article {
min-width: 15em;
}

در اینجا نتیجه را مشاهده می کنید:

وب سایت هایی که از گرید های CSS استفاده می کنند

ما در مورد گرید های CSS از لحاظ تئوری بسیار صحبت کرده ایم، اما در واقع آن ها چگونه به نظر می رسند؟ در مرحله بعد، بیایید چند نمونه عالی و واقعی از گرید در عمل را بررسی کنیم، که از وبلاگ Calendly شروع می شود.

وبلاگ Calendly

Calendly یک برنامه زمان بندی است که یک وبلاگ را نیز اجرا می کند. فهرست اصلی مقاله لینک ها به پست ها را در قالب گرید نمایش می دهد و هر کارت پیش نمایش مقاله خود را نشان می دهد. در اینجا، قالب گرید سنتی باعث می شود تا محتوای Calendly قابل درک باشد، در حالی که اکثر کارت ها سفید با حاشیه ظریف هستند، برجسته ترین پست ها رنگ می شوند و به طور برجسته در بالا نمایش داده می شوند تا چشم را به خود جلب کنند.

Ikea

وب سایت Ikea یک قالب گرید را در صفحات اصلی خود پیاده سازی می کند. هر مورد به عنوان لینک هدایت به مناطق مختلف وب سایت عظیم عمل می کند. بر خلاف مثال قبلی، سلول های این گرید عرض و ارتفاع یکنواختی را حفظ نمی کنند، اما عرض هر مورد همه متناسب با یکدیگر است. در تصویر زیر، سلول در سمت چپ دو برابر عرض موارد سمت راست است.

نتیجه

با صرف زمان لازم برای درک گرید CSS، بر خلاف تگ منسوخ شده Table که قبلاً برای چیدمان وب سایت های مشابه استفاده می شد، یک پایه قوی برای تولید وب سایت های ریسپانسیو ایجاد می کنید که باعث مطابقت بیشتر با استاندارد های گوگل می شود. امیدواریم این مقاله به شما در درک و ساخت یک گرید با CSS کمک کرده باشد.

منبع: hubspot.com

نوشته نحوه ساخت یک گرید با CSS در طراحی وب سایت رسپانسیو و مفاهیم آن اولین بار در ممتاز دیزاین. پدیدار شد.

از نظر فنی، گلس مورفیسم شامل طراحی یک کادر شفاف با کمی تاری، سایه و رنگ حاشیه روشن است که برای برخی از عناصر کارت مانند، در پس زمینه های رنگارنگ یا تک رنگ استفاده می شود. این امر بر اساس پس زمینه مورد استفاده، ظاهر شخصی تری برای رابط کاربری ایجاد می کند.

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

برای انجام طراحی به سبک شیشه ای با ما همراه شوید.

انتخاب پس زمینه

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

در همین مورد، ما قصد داریم پس زمینه ای با جلوه های گرادیان را اعمال کنیم تا زمان بارگذاری آن با یک تصویر واقعی افزایش نیابد.

برای طراحی این قسمت باید به تگ <body> در فایل HTML ویژگی های زیر را اضافه کنیم:

body {
    background: #edc0bf;
    background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
    padding: 4.5rem;
    margin: 0;
}
    

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

بیایید از استایل فونت بهتری مانند Inter که از فونت های Google نیز هست استفاده کنیم. با افزودن کد زیر در تگ <head>، می توانید فونت را تعریف کنید:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

سپس با اعمال font family بر روی تگ body در فایل CSS تان روند طراحی را ادامه دهید:

body {
    /* other styles */
    font-family: 'Inter', sans-serif;
}

ایجاد المان کارت مانند

بیایید با تنظیم نشانه گذار HTML یک کارت ایجاد کنیم که در واقع حالت شیشه ای دارد. می توانیم با افزودن عنوان، توضیحات و لینک ها این کار را به سادگی انجام دهیم:

   
<div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p> A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>

بیایید یک ظاهر اولیه به طراحی کارت و عناصر اضافه کنیم:

.card {
    width: 400px;
    height: auto;
    padding: 2rem;
    border-radius: 1rem;
}

.card-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

p, a {
    font-size: 1rem;
}

a {
    color: #4d4ae8;
    text-decoration: none;
}
    

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

افزودن افکت ها به Glassmorphism

افزودن افکت و تنظیم یک پس زمینه نیمه شفاف و استفاده از ویژگی های فیلتر زمینه برای افزودن جلوه ای تار به پس زمینه، بسیار ساده است. فقط کافی است ویژگی های زیر را به عنصر card در فایل CSS خود اضافه کنید:

.card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

عالی شد! اکنون خواهید دید که پس زمینه سفید و نیمه شفاف است، البته ممکن است بپرسید که حالت شیشه ای این طراحی کجاست؟

خب، هنوز نمی توانید آن را ببینید، زیرا هیچ چیزی در پشت عناصر به اندازه کافی متمایز نیست که بتواند حس شیشه ای را القا کند. بنابراین ما قصد داریم با استفاده از یک تصویر SVG یک شکل به آن اضافه کنیم.

برای این کار به تگ HTML کد زیر را اضافه کنید:

    
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

سپس استایل های زیر را به CSS اضافه کنید:

.shape {
    position: absolute;
    width: 150px;
    top: .5rem;
    left: .5rem;
}
    

اکنون می توانید جلوه های کامل طراحی شیشه ای را با شکلی متمایز تر در پس زمینه و تار شدن کارت شفاف خود مشاهده کنید. این عالی به نظر می رسد!

همانطور که می بینید، برای قرار دادن صحیح عناصر کنار هم و طراحی یک جلوه شیشه ای خوب، کار شما مقدار بیشتری طول می کشد، اما پس از انجام آن کار شما واقعاً منحصر به فرد به نظر می رسد. شکل پشت عناصر کارتی شکل حداقل از لحاظ نظری می تواند هر چیزی باشد. اما ترجیح داده می شود که آن ها اشکال یا تصاویر ساده باشند، یا بیشتر تصاویری باشند که جزئیات کمتری دارند.

در اینجا یک مثال کوچک از طراحی سایت به صورت شیشه ای وجود دارد که می توانید کد کامل آن را ببینید:

<!DOCTYPE html>
<html lang="en">
<head >
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect by ui.glass</title>

<style>
body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}
</style>
</head>
<body>
  <img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
  <div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>

  </div>
</body>
</html>

در انتها نیز کد بالا تصویر پایین را برای ما طراحی می کند:

پشتیبانی از طراحی شیشه ای در مرورگر

ما به عنوان یک تیم طراحی وب موفق وظیفه داریم مطمئن شویم که کدی که می نویسیم برای اکثر مرورگر های موجود در بازار قابل پشتیبانی است. اکثر ویژگی های CSS که ما در این آموزش استفاده کرده ایم توسط همه مرورگر ها پشتیبانی می شود، به جز یکی: که آن هم ویژگی backdrop-filter است.

البته حالت گلس مورفیسم به هیچ وجه توسط IE 11 پشتیبانی نمی شود، البته اگر بخواهیم صادقانه بگوی، در سال های آینده اهمیت چندانی نیز نخواهد داشت. با ورود Bootstrap 5، آن ها دیگر پشتیبانی جدیدی از IE 11 را اضافه نکردند، علاوه بر این، مایکروسافت اعلام کرد که پشتیبانی از IE 11 را در آگوست امسال متوقف می کند. بنابراین نباید خیلی هم نگران آن باشیم.

با این حال، یک مشکل دیگر نیز در این جا وجود دارد، فایرفاکس بنا به دلایلی، ویژگی backdrop-filter را به طور پیش فرض فعال نمی کند، حتی اگر مرورگر از این نوع استایل پشتیبانی کند. البته ما امیدواریم در آینده نزدیک این ویژگی به طور پیش فرض فعال شود.

بنابراین، آیا می توان از طراحی شیشه ای یا گلس مورفیسم (glassmorphism) در تولید و طراحی سایت استفاده کرد؟ در حقیقت جواب ما مثبت است. این واقعیت که glassmorphism در چند مرورگر کار نمی کند (3.76 برای Firefox دقیق تر)، بدان معنا نیست که این رابط کاربری برای همه مرورگر ها به اندازه کافی خوب نیست.

ما معمولاً از این نوع طراحی برای سایت های سطح سازمانی که دسترسی به آن ها برای عموم مهم و ضروری است استفاده نمی کنیم، اما شاید بهتر باشد از آن برای وب سایت های شخصی یا تجاری، حتی برای برخی از رابط های برنامه ای استفاده کنیم.

نتیجه

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

امیدواریم این آموزش به شما در درک بیشتر این ترند طراحی جدید و نحوه پیاده سازی آن در رابط های وب کمک کند.

منبع:

themesberg.com

نوشته جدید ترین ترند طراحی سایت؛ Glassmorphism یا طراحی سایت شیشه ای اولین بار در ممتاز دیزاین. پدیدار شد.

CSS آماده استفاده چیست و مزایای آن چیست؟

CSS آماده یا تمپلت های CSS در واقع یک نوع طراحی وب سایت است که با استفاده از فناوری Cascading Style Sheets (CSS) ایجاد شده است. CSS های آماده به توسعه دهندگان وب این امکان را می دهد تا به راحتی همه صفحات یک وب سایت را همزمان فرمت و استایل کنند. CSS حتی بیشتر مورد استفاده قرار خواهد گرفت زیرا توسط همه (99.98٪) مرورگر ها به یک صورت مشاهده می شود.

CSS های آماده امکان سازگاری مرورگر و سیستم عامل را افزایش می دهد. این بدان معنی است که وب سایت شما در ویندوز، یونیکس، مک، لینوکس، نت اسکیپ، اینترنت اکسپلورر، فایرفاکس و سایر مرورگر ها عالی به نظر می رسد. هر CSS آماده بر روی چندین سیستم عامل آزمایش می شود تا بهترین انطباق را با تمام نیاز ها داشته باشد و این یکی از مزایای آن است.

Style Sheets ساده ترین راه برای ایجاد یک استایل پیش فرض برای HTML را ارائه می دهد. بنابراین، هنگام ویرایش فقط یک فایل CSS، می توانید کل متن را تغییر داده و به طور مثال رنگ ها را در همه صفحات لینک دهید! CSS همچنین کد گذاری شما را بسیار آسان می کند زیرا مجبور نیستید به طور مکرر تگ های قالب بندی را برچسب بزنید. این کد ساده باعث بارگیری سریع تر و کاهش پهنای باند می شود.

الگو های CSS سازگاری 100٪ با Macromedia Dreamweaver و Microsoft FrontPage و همچنین بسیاری از ویرایشگران وب دیگر دارند. استفاده از این فناوری آسان تر و سریع تر از کدگذاری HTML است.

بلوک ها به جای جداول در الگو های CSS استفاده می شوند و می توانید بلوک های محتوا را با کشیدن و رها کردن آن ها در ویرایشگر HTML خود جابجا کنید. علاوه بر این، این برچسب ها توسط JavaScript و سایر زبان های برنامه نویسی وب بهتر درک می شوند و برخی دیگر از خبر های خوب این است که اکنون، برای اصلاح طرح سایت خود نیازی به کنار آمدن با جداول پیچیده HTML ندارید!

از کجا می توان CSS آماده گرفت؟

فناوری CSS گامی بزرگ در جهت توسعه وب است. محتوای جداگانه و ارائه نیز انعطاف پذیری بیشتری به وب سایت شما می بخشد. شما با تغییرات بعدی وب سایت خود مشکلی نخواهید داشت. همه تمپلت ها بر اساس فناوری ها و استاندارد های وبسایت معروف www.w3c.org ساخته شده اند که وب سایت شما را حتی کاربر پسندتر می کند.

می توانید تمپلت ها و CSS های آماده را از طریق وبسایت های زیر دریافت کنید:

• www.w3.org/Style/Examples/011/firstcss
• www.w3schools.com/css/default.asp
• www.echoecho.com/css.htm
• www.htmlhelp.com/reference/css/quick-tutorial.html

چگونه از CSS های آماده استفاده کنیم؟

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

• CSS آماده خود را در همان دایرکتوری صفحات HTML که می خواهید از آن الگو استفاده کنید، ذخیره کنید. به عنوان مثال، اگر می خواهید صفحه “index.html” از الگوی “style.css” استفاده کند، پس style.css را در همان پوشه ای که “index.html” را در آن ذخیره می کنید ذخیره کنید.
• فایل HTML را در یک ویرایشگر متن مانند VS Code باز کنید.
• تگ هایی که باید در تگ head قرار بگیرند را در جای خود قرار دهید. آدرس فایل CSS را بین این تگ ها وارد کنید تا فایل HTML به فایل تمپلت CSS لینک داده شود. فایل الگوی شما ممکن است نام دیگری داشته باشد، بنابراین از نام صحیح به جای “style.css” استفاده کنید. بخش هد HTML شما شبیه به این مثال است:

• فایل HTML را ذخیره کنید.
• فایل HTML را در یک مرورگر وب باز کنید. استایل CSS آماده که پیوست کردید در حال اجراست و باعث می شود وب سایت شما سازگارتر باشد.

مزایای استفاده از CSS آماده

به طور مداوم کارآمد است

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

زمان کمتری نیاز دارد

کد کمتر به معنای زمان بارگیری سریع تر است. وقتی از CSS آماده استفاده می کنید، نیازی نیست که توسعه دهندگان مقدار خطوط کد را برای هر صفحه کاهش دهند، زیرا این قالب های آماده به صورت خودکار قبلا فشرده شده اند. این باعث سریع تر شدن وب سایت شما نسبت به سایت های دیگر است که از CSS های آماده و فشرده شده استفاده نمی کنند. این یکی از بزرگ ترین مزایای استفاده از CSS آماده نسبت به کد زنی کاملا سفارشی است که زمان زیادی اتمام آن طول می کشد و بار ها و بار ها نیاز به بازبینی و دیباگ دارد.

تعمیر و نگهداری کم

CSS آماده تعمیر و نگهداری وب سایت را ساده کرده و به توسعه دهندگان و طراحان وب یک صفحه را برای مدیریت می دهد، این امر برای توسعه دهندگان وب آسان سازی قالب، مدیریت و تغییر عناصر را به همراه دارد.

سخن آخر

حال که می دانید CSS های آماده استفاده دقیقاً چه چیزی هستند و مزایای استفاده از آن ها چیست، بد نیست به وب سایت های معرفی شده سری بزنید و سعی کنید از آن ها استفاده کنید. اگر در حال یادگیری زبان CSS هستید توصیه می کنیم پست های ما در مورد چگونگی استفاده از زبان CSS و طراحی وب سایت در Visual Studio را بررسی کنید. امیدواریم این پست برای شما مفید بوده باشد.

نوشته مزایای استفاده از CSS های آماده استفاده چیست و از کجا می توان آن ها را گرفت؟ اولین بار در ممتاز دیزاین. پدیدار شد.

فواید استفاده از CSS

اگر در صفحات وب خود از CSS استفاده نمی کنید، بهتر است هر چه زودتر آن را یاد بگیرید. CSS از پشتیبانی عالی در مرورگر های امروز برخوردار است. یادگیری و تولید کد بهتر و تمیز تر نسبت به استفاده از همه آن سبک ها به طور مستقیم در HTML شما، نسبتاً آسان است.

استفاده از CSS وب سایت های شما را به همان روشی که برنامه نویسان برای یک سال کد نرم افزار را مدوله کرده اند، مدولار می کند. کد مدولار در وب سایت شما امکان سازگاری بیشتر در طراحی و نگهداری آسان تر را فراهم می کند. CSS استاندارد جدیدی است و اکنون چندین سال است که وجود دارد. زمان آن فرا رسیده است که ساختار HTML و ارائه CSS را از هم تفکیک کنیم.

بنابراین اگر ما سال هاست که از HTML استفاده می کنیم و انواع وب سایت های عالی را با آن ها ایجاد می کنیم چرا سوییچ می کنیم؟ برخی از مزایای استفاده از CSS عبارتند از:

• نگهداری و به روزرسانی آسان تر
• سازگاری بیشتر در طراحی
• گزینه های قالب بندی بیشتر
• کد سبک
• زمان بارگیری سریع تر
• مزایای بهینه سازی موتور جستجو
• سهولت ارائه سبک های مختلف به بینندگان مختلف
• قابلیت دسترسی بیشتر

در ادامه به بررسی بیشتر برخی از این مزیت هامی پردازیم.

تفکیک سبک و ساختار

ایده اصلی در پشت CSS جدا کردن ساختار یک سند از ارائه سند است. HTML برای ساختار در نظر گرفته شده است. هرگز برای چیز دیگری در نظر گرفته نشده بود. همه خصوصیاتی که شما برای سبک کردن صفحات خود اضافه می کنید بعداً به عنوان درخواست بازدید کنندگان اضافه شد. همه این موارد اضافه شده HTML را دست و پا چلفتی جلوه می دهند و بر خلاف هدف اصلی آن از ساختار یک سند عمل می کنند. HTML وجود دارد تا به مرورگر اطلاع دهد که این مجموعه متن یک پاراگراف است و آن مجموعه متن عنوان این پاراگراف است و چیز هایی از این قبیل.

بدون وجود HTML اضافی برای فرم دهی ساختار سند شما بسیار خوانا تر است و به راحتی می توانید آن را به روز کنید. تمام CSS های مورد استفاده شما را می توان به عنوان یک فایل جداگانه به فایل HTML الصاق کرد و همچنین به روزرسانی سبک های شما را آسان تر می کند. قبل از اینکه به هر یک از صفحات خود رنگ زمینه بدهید، می توانستید “bgcolor=red” را به هر برچسب بدنه در سایت خود اضافه کنید. چه اتفاقی افتاد وقتی فهمیدید که قرمز رنگ زمینه خوبی ایجاد نمی کند و می خواهید آن را به یک خاکستری روشن تغییر دهید.

با داشتن یک سایت کوچک، باز کردن 10 پرونده و ایجاد تغییر از “FF0000 #” (قرمز) به “EEEEEE #” (خاکستری روشن) مسئله چندان مهمی نیست. اما اگر 100 صفحه داشته باشید چه می کنید؟ 1000 صفحه؟ برای کد گذاری پس زمینه در هر صفحه از سایت خود با استفاده از CSS، به طور کلی یک خط کد لازم است، کافیست متن {background: # ff000} در صفحه style شما نوشته شود. یک خط کد به راحتی در عرض چند ثانیه تغییر می کند تا بر تغییر رنگ پس زمینه در سطح سایت تأثیر بگذارد و تمام صفحات شما که به آن فایل css خاص متصل هستند نیز تغییری که شما ایجاد کرده اید را بپذیرند.

زمان بارگیری سریع تر صفحه وب

استفاده از CSS به طور کلی منجر به کد کمتری در پشت صفحات وب شما می شود که به بارگیری سریع تر یک صفحه کمک می کند. وقتی مرورگر جدولی را در کد شما مشاهده می کند، لازم است همه کد شما را دو بار بخواند. یک بار برای درک ساختار جدول و یک بار دیگر برای نمایش واقعی محتوای داخل جدول. زمان اضافی باعث کند شدن صفحه شما می شود.

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

در مصاحبه اریک میر با مایک دیویدسون از ESPN، آقای دیویدسون تخمین زد که هر روز 2 ترابایت پهنای باند پس از انتقال به CSS در وب سایت ESPN ذخیره می شود. شما همچنین می توانید برای درک بهتر این موضوع به مقاله ما در مورد استفاده از فونت ها و آیکون های CSS مراجعه کنید و کد ها را ببینید.

کنترل بیشتر ارائه

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

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

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

بهینه سازی موتور جستجو

اگرچه به طور کلی مورد موافقت همه نیست، اما احتمالاً CSS می تواند به شما در یافتن صفحات شما در موتور جستجو کمک کند. از آنجا که سایت CSS شما دارای کد کمتری است و ساختار ساده تری دارد، خواندن آن نه تنها برای شما، بلکه همچنین برای ربات های موتور جستجو آسان تر است. اجازه می دهد ربات های موتور جستجو سریعتر از کد شما عبور کنند، به این معنی است که صفحات وب شما سریع تر ایندکس می شوند.

همچنین این احتمال وجود دارد که کد کمتری به عنوان متنی که چگالی کلمات کلیدی صفحه را بهبود می بخشد، تفسیر شود. با کد کمتر برای درهم آمیختن، ربات های موتور جستجو راحت تر می توانند تعیین کنند صفحه به چه چیزی مربوط می شود. همه موارد دیگر برابر بودن صفحات وب که از CSS برای طراحی خود استفاده می کنند، به احتمال زیاد رتبه بالاتری در موتورهای جستجو دارند.

CSS چگونه کار می کند؟

CSS با تعامل با عناصر HTML استایل را به صفحات وب شما می آورد. عناصر، همان عناصر جداگانه HTML یک صفحه وب هستند – به عنوان مثال یک پاراگراف – که در HTML ممکن است به این شکل باشد:

<p>This is my paragraph!</p>

اگر می خواهید این پاراگراف برای افرادی که صفحه وب شما را از طریق مرورگر وب مشاهده می کنند، صورتی و پررنگ جلوه کند، می توانید از کد CSS استفاده کنید که به این شکل است:

p{
color:pink;
font-weight:bold;
}

در این حالت، “p” (پاراگراف) “selector” نامیده می شود، این بخشی از کد CSS است که مشخص می کند کدام یک از عناصر HTML در حال گرفتن استایل است. در CSS، انتخابگر در سمت چپ اولین کروشه نوشته شده است. اطلاعات بین کروشه را اعلان می نامند و حاوی خصوصیات و مقادیری است که برای سلکتور اعمال می شود. خصوصیات مواردی مانند اندازه فونت، رنگ و حاشیه (border) هستند. در مثال بالا، “color” و “font-weight” هر دو از خصوصیات هستند و “صورتی” و “bold” مقادیر هستند. مجموعه پرانتز کامل از:

p{
color:pink;
font-weight:bold;
}

اعلامیه و دوباره، “p” (به معنی پاراگراف HTML) سلکتو است. همین اصول اساسی را می توان برای تغییر اندازه فونت، رنگ پس زمینه، تو رفتگی حاشیه و موارد دیگر استفاده کرد. برای مثال:

body{
background-color:lightblue;
}

پس زمینه صفحه شما را آبی روشن می کند، یا در مثالی دیگر:

p{
font-size:20px;
color:red;
}

یک پاراگراف با فونت 20 پیکسلی با حروف قرمز ایجاد خواهد کرد.

CSS خارجی، داخلی یا Inline؟

شاید از خود بپرسید که چگونه این کد CSS در واقع در محتوای HTML اعمال می شود. دقیقاً مانند HTML، زبان CSS kdc با یک متن ساده و از طریق ویرایشگر متن یا پردازشگر کلمه در رایانه شما نوشته می شود و سه روش اصلی برای افزودن کد CSS به صفحات HTML شما وجود دارد. کد CSS (یا Style Sheets) می تواند خارجی، داخلی یا اینلاین باشد.

CSS های خارجی به عنوان پرونده های “css.” ذخیره می شوند و می توانند برای تعیین ظاهر یک وب سایت کامل از طریق یک فایل (به جای افزودن موارد منفرد کد CSS به هر عنصر HTML که می خواهید تنظیم کنید.) مورد استفاده قرار گیرند. برای استفاده از یک css خارجی فایل های “html.” شما باید شامل یک بخش هدر باشند که به صفحه سبک خارجی لینک می شود و چیزی شبیه به این است:

<head>
<link rel="stylesheet" type="css" href="style.css">
</head>

با این کار فایل html به استایل شیت خارجی شما لینک داده می شود (در حالت style.css) و تمام دستورالعمل های CSS موجود در آن پرونده در صفحات لینک داده شده html اعمال می شود.

استایل های داخلی دستورالعمل های CSS هستند که مستقیماً در هدر یک صفحه خاص html نوشته می شوند. (این به ویژه اگر یک صفحه در سایتی داشته باشید که دارای ظاهری منحصر به فرد باشد بسیار مفید است.) یک صفحه سبک داخلی به این شکل به نظر می رسد:

<head>
<style>
Body{background-color:thistle;}
P{font-size:20px; color:mediumblue;}
</style>
</head>

یک رنگ پس زمینه و پاراگراف هایی با فونت آبی رنگ و سایز 20 پیکسلی متوسط، اکنون روی این صفحه html منفرد اعمال می شود.

و در آخر استایل های اینلاین قطعه هایی از CSS هستند که مستقیماً در کد HTML نوشته شده اند و فقط در یک نمونه کد گذاری اعمال می شوند. مثلا:

<h1 style="font-size:40px; color:violet;"> Check out this headline! </h1>

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

سخن آخر

مزایای فایل های خارجی css بسیار است و با توجه به پشتیبانی مرورگر های مدرن، هیچ بهانه ای برای عدم یادگیری و استفاده از آن ها وجود ندارد. اگر همه موارد بالا شما را متقاعد نکرده باشند، بهتر است بدانید HTML قبلاً منسوخ شده است و در برخی از مراحل آینده دیگر در مرورگر ها کار نمی کند. با رسیدن آن زمان، در بسیاری از مرورگر های جدید نمایش داده نمی شوند و نیاز به کد گذاری مجدد دارند. کسانی که در حال حاضر از کد های css استفاده می کنند به عملکرد عادی خود ادامه خواهند داد.

نوشته زبان CSS چیست و چگونه می توان از آن استفاده کرد؟ اولین بار در ممتاز دیزاین. پدیدار شد.