اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › شبه کلاس › شبه کلاس fullscreen: در CSS

شبه کلاس fullscreen: در CSS

:fullscreen Pseudo-class

عناصر مرتبط:
:target

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

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

در مثال زیر میبینیم که رنگ دکمه <button> به نسبت اینکه صفحه در حالت تمام عرض باشد یا نه تغییر پیدا می کند. این کار بدون نیاز به جاوااسکریپت انجام می شود.

html

<h1>:fullscreen استفاده از قابلیت سودو کلاس</h1>

<p> :fullscreen در این دمو با استفاده از سودو کلاس
در حالت تمام صفحه استایل دکمه ها تغییر میابد</p>

<button class="btn">Toggle Fullscreen</button>

دکمه با کلاس "btn" در حالت تمام صفحه و غیر تمام صفحه مرورگر، به رنگ آبی و قرمز تغییر رنگ پیدا می کند.

css

.btn {
  background-color: red;
}
.btn:fullscreen {
  background-color: blue;
}

این شبه کلاس فعلا بصورت کامل توسط مرورگرها پشتیبانی نمی شود.

پشتیبانی مرورگرها
تمام مرورگرها بجز Safari on iOS از این شبه کلاس در CSS پشتیبانی می کنند.

پست قبلی

شبه کلاس focus: در CSS

پست بعدی

شبه کلاس hover: در CSS

پست بعدی
css-hover-pseudo-class

شبه کلاس hover: در CSS

دیدگاه ها 2

  1. amir habibi می‌گوید:
    2 سال قبل

    می تونست خیلی بهتر می بود هنوزم متوجه نشدم

    پاسخ
    • سهیل اصلی فرد می‌گوید:
      2 سال قبل

      سلام. اگر مرورگر در حالت تمام صفحه باشه این سودوکلاس اونها را هدف میگیره. البته فعلا تمام مرورگرها از این سودوکلاس پشتیبانی نمی کنند و عموما از media query ها برای انتخاب عناصر در اندازه‌های مختلف مرورگر استفاده می‌کنیم.

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن