একটি সিএসএস বিধি অন্যের মধ্যে উল্লেখ করা কি সম্ভব?

Question

উদাহরণস্বরূপ যদি আমার কাছে নিম্নলিখিত এইচটিএমএল থাকে:

<div class="someDiv"></div>

এবং এই সিএসএস:

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

স্ক্রিপ্টিং ল্যাঙ্গুয়েজে আপনার যেমন জেনেরিক ফাংশন রয়েছে যা প্রায়শই স্ক্রিপ্টের শীর্ষে লেখা থাকে এবং প্রতিবার আপনাকে এই ফাংশনটি ব্যবহার করতে হবে আপনি প্রতিবার সমস্ত কোড পুনরাবৃত্তি না করে কেবল ফাংশনটি কল করেন।

Comments

এইচটিএমএল পরিবর্তন করা কি সম্ভব নয়?

— BoltClock

আপনি ক্লাসগুলির .radiusমত কমা-বিচ্ছিন্ন তালিকা যুক্ত করতে পারেন , পছন্দ করুন .radius, .another, .element{/* css*/}। এটি আপনার অতিরিক্ত কোড সংরক্ষণ করবে, তবে এটি সম্ভবত কম পাঠযোগ্য।

— লেকেনস্টেইন

সম্ভাব্য সদৃশ সদৃশ একটি সিএসএস শ্রেণি এক বা একাধিক শ্রেণীর উত্তরাধিকারী

— জৈব অ্যাডভোকেট

Answer 1

না, আপনি অন্যের থেকে একটি নিয়ম-সেট উল্লেখ করতে পারবেন না।

তবে আপনি স্টাইলশিটের মধ্যে একাধিক নিয়ম-সেটগুলিতে নির্বাচকদের পুনরায় ব্যবহার করতে পারেন এবং একক নিয়ম-সেটে একাধিক নির্বাচক ব্যবহার করতে পারেন ( সেগুলি কমা দিয়ে আলাদা করে )।

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

আপনি একটি একক এইচটিএমএল উপাদানে একাধিক ক্লাসও প্রয়োগ করতে পারেন (শ্রেণীর বৈশিষ্ট্যটি একটি স্থান পৃথকীকরণের তালিকা নেয়)।

<div class="opacity radius">

এই পদ্ধতির যে কোনও একটিতে আপনার সমস্যার সমাধান করা উচিত।

এটি সম্ভবত সহায়তা করবে যদি আপনি শ্রেণীর নাম ব্যবহার করেন যা বর্ণনা করে যে কোনও উপাদান কীভাবে স্টাইল করা উচিত তার পরিবর্তে কেন স্টাইল করা উচিত। স্টাইলশীটে কীভাবে ছেড়ে দিন ।

Comments

আমি অসম্মতি না কিন্তু আমি মন্তব্য করতে হবে, এটা যাক না যে আমাকে কপি নিয়ম যেমন fieldset legendকরতে label.legend। আমি বুঝতে পারছি কিন্তু আফসোস করছি।

— রিশ্তা

@ কৃষিতা - এর… আমি এই উত্তরের প্রথম অনুচ্ছেদে বলেছি।

— কোয়ান্টিন

আপনি এমন দুটি উপাদানের জন্য একটি বিধি-সেটও ঘোষণা করতে পারেন যার কেবল দুটি শ্রেণি রয়েছে: .someDiv.other{/*style...*/}এইভাবে, উভয় শ্রেণির রয়েছে এমন উপাদানগুলিই কেবল প্রভাবিত হবে

— সির্মেয়েলসাই

Answer 2

আপনি SASS এর মতো কিছু প্রসারিত সিএসএস ব্যবহার না করে আপনি পারবেন না । তবে এই দুটি অতিরিক্ত ক্লাস প্রয়োগ করা খুব যুক্তিসঙ্গত .someDiv।

যদি .someDivঅনন্য হয় তবে আমি এটি একটি আইডি দিতে এবং আইডি ব্যবহার করে সিএসএসে এটি উল্লেখ করতে পছন্দ করব।

Answer 3

আপনি যদি কিছু ইচ্ছুক নিয়োগ করতে ইচ্ছুক এবং সক্ষম হন তবে আপনি কেবল এটি করতে পারেন:

$('.someDiv').css([".radius", ".opacity"]);

আপনার যদি জাভাস্ক্রিপ্ট থাকে যা ইতিমধ্যে পৃষ্ঠাটি প্রসেস করছে বা আপনি <script> ট্যাগে কোথাও এটি আবদ্ধ করতে পারেন। যদি তা হয় তবে ডকুমেন্ট রেডি ফাংশনে উপরের মোড়ানো:

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

একটি ওয়ার্ডপ্রেস প্লাগইন আপডেট করার সময় আমি সম্প্রতি এটি জুড়ে এসেছি। সেগুলি পরিবর্তন করা হয়েছে যা CSS জুড়ে প্রচুর "গুরুত্বপূর্ণ" নির্দেশনা ব্যবহার করেছিল। বেশ কয়েকটি ট্যাগের ক্ষেত্রে জেনিয়াস ঘোষণা করার সিদ্ধান্তের কারণে আমাকে আমার স্টাইলগুলিকে জোর করতে jquery ব্যবহার করতে হয়েছিল!

Answer 4

আপনি সহজেই @ এক্সেট ব্যবহার করে SASS প্রি-প্রসেসরের সাহায্যে এটি করতে পারেন।

someDiv {
    @extend .opacity;
    @extend .radius;
}

ওহটারওয়াইজ, আপনি জাভাস্ক্রিপ্ট (jQuery) ব্যবহার করতে পারেন:

$('someDiv').addClass('opacity radius')

সবচেয়ে সহজ হ'ল HTML এ একাধিক ক্লাস যুক্ত করা

<div class="opacity radius">

Answer 5

কেবল আপনার এইচটিএমএলে ক্লাস যুক্ত করুন

<div class="someDiv radius opacity"></div>

Answer 6

গতকাল আমার এই সমস্যা ছিল @ কোয়ান্টিনের উত্তর ঠিক আছে:

No, you cannot reference one rule-set from another.

তবে CSS তে উত্তরাধিকার অনুকরণ করার জন্য আমি একটি জাভাস্ক্রিপ্ট ফাংশন করেছি (যেমন নেট):

    var inherit_array;
    var inherit;
    inherit_array = [];
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.style != null) {
                inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
            } else {
                inherit = "";
            }
            if (inherit != "") {
                inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
            }
        });
    });
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.selectorText != null) {
                inherit_array.forEach(function (inherit_i, index) {
                    if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
                        cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
                    }
                });
            }
        });
    });

Array.prototype.includesMember = function (arr2) {
    var arr1;
    var includes;
    arr1 = this;
    includes = false;
    arr1.forEach(function (arr1_i, index) {
        if (arr2.includes(arr1_i) == true) {
            includes = true;
        }
    });
    return includes;
}

এবং সমতুল্য CSS:

.test {
    background-color: yellow;
}

.productBox, .imageBox {
    --inherits: .test;
    display: inline-block;
}

এবং সমতুল্য HTML:

<div class="imageBox"></div>

নিয়মগুলি বিভিন্ন সিএসএস ফাইলে থাকলেও আমি এটি পরীক্ষা করেছি এবং আমার জন্য কাজ করেছি।

আপডেট: আমি এই দ্রবণে হায়ারারচিচাল উত্তরাধিকারে একটি বাগ পেয়েছি এবং খুব শীঘ্রই বাগটি সমাধান করছি।

Answer 7

আপনি var () ফাংশন ব্যবহার করতে পারেন ।

Var () CSS ফাংশনটি অন্য কোনও সম্পত্তির মানের কোনও অংশের পরিবর্তে একটি কাস্টম সম্পত্তির (কখনও কখনও "সিএসএস ভেরিয়েবল" নামে পরিচিত) এর মান সন্নিবেশ করতে ব্যবহার করা যেতে পারে ।

উদাহরণ:

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}