روشی برای به دست آوردن عرض scrollbar بدون استفاده از جاوااسکریپت که احتمالا به کارتون بیاد:
میتونیم عرض scrollbar رو به پیکسل در یک متغیر CSS ذخیره کنیم و ازش در هر قسمته دیگه از کد استفاده کنیم. همچنین میتونیم این مقدار رو بدون واحد و فقط مقدار عددیش رو بدستش بیاریم و نمایش بدیم. این روش باعث میشه کدمون سادهتر و برای تغییر راحتتر باشه.
#UI
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/ChallengesCss/status/1857031287682334869?s=19
میتونیم عرض scrollbar رو به پیکسل در یک متغیر CSS ذخیره کنیم و ازش در هر قسمته دیگه از کد استفاده کنیم. همچنین میتونیم این مقدار رو بدون واحد و فقط مقدار عددیش رو بدستش بیاریم و نمایش بدیم. این روش باعث میشه کدمون سادهتر و برای تغییر راحتتر باشه.
#UI
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/ChallengesCss/status/1857031287682334869?s=19
X (formerly Twitter)
CSS by T. Afif (@ChallengesCss) on X
💡 CSS Tip!
Do you want to know the scrollbar width? It's possible using only CSS and a few lines of code! You can get the pixel value within a CSS variable and use it everywhere.
As a bonus, you can also have the unitless value and show it!
Do you want to know the scrollbar width? It's possible using only CSS and a few lines of code! You can get the pixel value within a CSS variable and use it everywhere.
As a bonus, you can also have the unitless value and show it!
👍3❤1
یه چیت شیت خوب واسه sql و css
خلاصه که عشق کنید😁
توو منبع اصلیش(لینک اخر) چیت شیتای بیشتری گذاشته، پیشنهاد میکنم بررسی کنین
#css
#sql
@GoldenCodeir
(منبع👇🏾)
https://x.com/swapnakpanda/status/1867820437310218716?s=19
خلاصه که عشق کنید😁
توو منبع اصلیش(لینک اخر) چیت شیتای بیشتری گذاشته، پیشنهاد میکنم بررسی کنین
#css
#sql
@GoldenCodeir
(منبع👇🏾)
https://x.com/swapnakpanda/status/1867820437310218716?s=19
🔥4
قابلیت where() در CSS به ما این امکان رو داده که استایل یکسانی رو به چندین عنصر مختلف بتونیم اعمال کنیم، بدون این که بخوایم برای هر کدومشون استایل مجزا بنویسیم.
برای این کار میتونیم نام selector ها رو داخل پرانتز قرار بدیم و اونارو با کاما از هم جدا کنیم. این کار باعث میشه کدهای CSS ما کوتاهتر، مرتبتر و خواناتر بشه.
#CSS
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/DevKhan03/status/1868564057306919234?t=PFsXj5Xnqgrsy_NlxBJ6bw&s=35
برای این کار میتونیم نام selector ها رو داخل پرانتز قرار بدیم و اونارو با کاما از هم جدا کنیم. این کار باعث میشه کدهای CSS ما کوتاهتر، مرتبتر و خواناتر بشه.
.item :where(h1, h2, p) {
color: red;
}#CSS
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/DevKhan03/status/1868564057306919234?t=PFsXj5Xnqgrsy_NlxBJ6bw&s=35
X (formerly Twitter)
Khan Nasir (@DevKhan03) on X
CSS Tip! 💡
The CSS :where() pseudo-class is used to apply the same style to all elements within the parentheses at once.
The :where() pseudo-class requires a list of selectors separated by commas as its argument.
The CSS :where() pseudo-class is used to apply the same style to all elements within the parentheses at once.
The :where() pseudo-class requires a list of selectors separated by commas as its argument.
👍4🆒1
ظاهر فرم ها بطور پیشفرض سادست ولی یه سری مواقع نیازه کاستوم بشن. یک قابلیتی که css ارائه داده و خیلی مفیده accent-color هستش.
با این قابلیت میشه حتی اجزای فرم مثل check box یا radio button ها رو هم به زیبایی کاستومشون کرد بصورت دیفالت تا با ظاهر سایت هماهنگ تر بشن👌🏾
#Css
#UI
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/csaba_kissi/status/1695692651188916575?t=QCxTPRVdbovbQJ-9Z8PD7w&s=35
با این قابلیت میشه حتی اجزای فرم مثل check box یا radio button ها رو هم به زیبایی کاستومشون کرد بصورت دیفالت تا با ظاهر سایت هماهنگ تر بشن👌🏾
#Css
#UI
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/csaba_kissi/status/1695692651188916575?t=QCxTPRVdbovbQJ-9Z8PD7w&s=35
🔥5👍1
قابلیت @ supports به ما این امکان رو داده تا بتونیم بررسی کنیم آیا یک ویژگی CSS توسط مرورگر پشتیبانی میشه یا نه.
مثلاً ممکنه یه مرورگر نتونه ویژگیهای جدید رو درست نشون بده.
در صورتیکه از ویژگی پشتیبانی بشه استایل مدنظر اعمال میشه ، و در غیر این صورت میتونیم استایلهای دیگه برای مرورگرهای قدیمیتر تنظیم کنیم با این قابلیت.
(در تصویر مثالش درج شده کامل)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1855983339574030540?t=hLQU1LKcGWjs93IvrIrsWA&s=35
مثلاً ممکنه یه مرورگر نتونه ویژگیهای جدید رو درست نشون بده.
در صورتیکه از ویژگی پشتیبانی بشه استایل مدنظر اعمال میشه ، و در غیر این صورت میتونیم استایلهای دیگه برای مرورگرهای قدیمیتر تنظیم کنیم با این قابلیت.
(در تصویر مثالش درج شده کامل)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1855983339574030540?t=hLQU1LKcGWjs93IvrIrsWA&s=35
👍3🔥3❤1
در css قابلیته currentColor به ما این امکانو داده که بتونیم از رنگ متن برای باقیه بخش هامون مثل رنگ border یا background به راحتی استفاده کنیم !
بدونه اینکه مجبور بشیم رنگ رو دوباره بنویسیم.
(در تصویر کامل شرح داده شده👌🏾)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1882792377305432164?t=FGfvEwhgRi4bz7Xslwg47g&s=19
بدونه اینکه مجبور بشیم رنگ رو دوباره بنویسیم.
(در تصویر کامل شرح داده شده👌🏾)
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/codewithshripal/status/1882792377305432164?t=FGfvEwhgRi4bz7Xslwg47g&s=19
❤2👍2