কেবলমাত্র উপাদানগুলির জন্য সিএসএস শৈলীগুলি পুনরায় সেট / সরান

Question

আমি নিশ্চিত যে এর আগে অবশ্যই এর উল্লেখ / জিজ্ঞাসা করা হয়েছে তবে ভাগ্য নির্বিঘ্নে একটি যুগের সন্ধান করা হয়েছে, আমার পরিভাষা অবশ্যই ভুল হতে হবে!

আমি অস্পষ্টভাবে কিছুক্ষণ আগে দেখেছি এমন একটি টুইট মনে পড়ে যা প্রস্তাব করেছিল যে এমন কোনও সিএসএস বিধি উপলব্ধ রয়েছে যা কোনও নির্দিষ্ট উপাদানের জন্য স্টাইলশীটে পূর্বে সেট করা কোনও শৈলী মুছে ফেলবে।

একটি ভাল ব্যবহারের উদাহরণটি মোবাইল-প্রথম আরডাব্লুডি সাইটে থাকতে পারে যেখানে ছোট-স্ক্রিন ভিউগুলিতে কোনও নির্দিষ্ট উপাদানের জন্য ব্যবহৃত বেশিরভাগ স্টাইলিংয়ের ডেস্কটপ ভিউতে একই উপাদানটির জন্য 'পুনরায় সেট করা' বা অপসারণ প্রয়োজন।

একটি সিএসএস বিধি যা এরকম কিছু অর্জন করতে পারে:

.element {
  all: none;
}

ব্যবহারের উদাহরণ:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

সুতরাং আমরা প্রতিটি সম্পত্তি ঘোষণা না করেই দ্রুত স্টাইলিং সরিয়ে বা পুনরায় সেট করতে পারতাম।

বোধ হয়?

Comments

না, এ জাতীয় কোনও অস্তিত্ব নেই। কোনও উপাদান কোনও নিয়মের মাধ্যমে একটি নির্দিষ্ট সিএসএস স্টাইল পেয়ে গেলে, এটি কেবল "ফিরিয়ে নেওয়া" হতে পারে না - একমাত্র উপায় প্রতিটি সিএসএস সম্পত্তি স্পষ্টভাবে পছন্দসই মান দিয়ে ওভাররাইট করা।

— সিব্রো

এটি করার উপায়টি হল মিডিয়া ক্যোয়ারীগুলির সাথে প্রথম স্থানে এটি সীমাবদ্ধ করা

— কেভিন লিঞ্চ

সম্পর্কিত: stackoverflow.com/questions/7398279/...

— Milche Patern

সেখানে হয় একটি সম্পত্তি বলা allযে রিসেট করার জন্য প্রস্তাবিত হচ্ছে সব নির্দিষ্ট সিএসএস ব্যাপী মান একটি প্রদত্ত উপাদানের জন্য CSS বৈশিষ্ট্য - মান আপনি ব্যবহার করতে চান হবে unset, যা হয় তার উত্তরাধিকার হিসেবে প্রাপ্ত মান একটি সম্পত্তি রিসেট তবে এটি ডিফল্ট দ্বারা অধিকারপ্রাপ্ত, অথবা অন্যথায়, এর প্রাথমিক মান। বাস্তবায়নের বিষয়ে কোনও শব্দ নেই, তবে কেউ এটি সম্পর্কে ভেবে দেখে ভাল লাগছে।

— BoltClock

all: revertকরব. আমার উত্তর দেখুন। @ সিব্রো হ্যাঁ এই জাতীয় জিনিস এখন বিদ্যমান।

— অসীম কেটি

Answer 1

সিএসএস 3 কীওয়ার্ডটি সিএসএস 3 সম্পত্তিটিকে প্রাথমিক মান হিসাবেinitial সেট করে যা অনুমিতে বর্ণিত । initialশব্দ রয়েছে বিস্তৃত ব্রাউজার সমর্থনের ইন্টারনেট এবং অপেরা মিনি পরিবারের জন্য ব্যতীত।

যেহেতু আইই-র সহায়তার অভাব এখানে সমস্যার কারণ হতে পারে আপনি কয়েকটি সিএসএস বৈশিষ্ট্যগুলিকে তাদের প্রাথমিক মানগুলিতে পুনরায় সেট করতে পারেন তার কয়েকটি উপায়:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• একটি ডিসেম্বরের সাথে রিলেভেন্ট গিথুব রেপো 2017 আরও বহিরাগত তালিকা
• সম্পর্কিত
• এমডিএন থেকে সম্পর্কিত
• সম্পর্কিত ডাব্লু 3 সি চশমা

@ User566245 এর একটি মন্তব্যে যেমন উল্লেখ করা হয়েছে:

এটি নীতিগতভাবে সঠিক, তবে পৃথক মাইলেজ পৃথক হতে পারে। উদাহরণস্বরূপ, ডিফল্টরূপে পাঠ্যরিয়ার মতো নির্দিষ্ট উপাদানগুলির একটি সীমানা থাকে, এই পুনরায় সেট করা প্রয়োগ করে সেই পাঠেরিয়ার সীমানা কম রেন্ডার হবে।

[পোস্টটি সম্পাদনা গত 4 ফেব্রুয়ারি '17] সম্মত একটি আধুনিক আদর্শ হয়ে উঠছে জন্য ব্যাবহারকারী জুস্ট

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

ডাব্লু 3 থেকে উদাহরণ

উদাহরণস্বরূপ, যদি কোনও লেখক সমস্ত সুনির্দিষ্ট করে: কোনও মৌলিক ক্ষেত্রে এটি প্রাথমিকভাবে সমস্ত উত্তরাধিকার অবরুদ্ধ করে এবং সমস্ত সম্পত্তি পুনরায় সেট করে দেয়, যেমন ক্যাসকেডের কোনও লেখক, ব্যবহারকারী বা ব্যবহারকারী-এজেন্ট স্তরে কোনও বিধি প্রকাশিত হয়নি।

এটি কোনও পৃষ্ঠায় অন্তর্ভুক্ত "উইজেট" এর মূল উপাদানগুলির জন্য দরকারী হতে পারে, যা বাইরের পৃষ্ঠার শৈলীর উত্তরাধিকারী হতে চায় না। দ্রষ্টব্য, তবে যে কোনও "ডিফল্ট" শৈলী সেই উপাদানটিতে প্রয়োগ করা হয়েছে (যেমন, উদাহরণস্বরূপ: ব্লক উপাদানগুলিতে ইউএ স্টাইল শীট থেকে ব্লক) এছাড়াও উড়িয়ে দেওয়া হবে।

---

জাভাস্ক্রিপ্ট?

সিএসএস রিসেট করার জন্য সিএসএস ছাড়া অন্য কেউ ভাবেনি? হ্যাঁ?

এই স্নিপটি পুরোপুরি প্রাসঙ্গিক: https://stackoverflow.com/a/14791113/845310

getElementsByTagName ("*") সমস্ত উপাদান ডিওএম থেকে ফিরিয়ে দেবে। তারপরে আপনি সংগ্রহে প্রতিটি উপাদান জন্য শৈলী সেট করতে পারেন:

ভিজিওএন দ্বারা 9 ফেব্রুয়ারী '13 এ 20:15 এ উত্তর দিয়েছে

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

---

এই সব বলেছে; আমি মনে করি না যে আমরা কেবলমাত্র একটি ওয়েব ব্রাউজার দিয়ে শেষ না করে যদি একটি সিএসএস পুনরায় সেট করা সম্ভব হয় তবে 'ডিফল্ট' যদি শেষ পর্যন্ত ব্রাউজার দ্বারা সেট করা থাকে।

তুলনার জন্য, ফায়ারফক্স 40.0 মান তালিকা <blockquote style="all: unset;font-style: oblique">যেখানে font-style: obliqueDOM অপারেশন ট্রিগার করে।

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

Comments

আমি মনে করি এটি নীতিগতভাবে সঠিক, তবে পৃথক মাইলেজ পৃথক হতে পারে। উদাহরণস্বরূপ, ডিফল্টরূপে পাঠ্যরিয়ার মতো নির্দিষ্ট উপাদানগুলির একটি সীমানা থাকে, এই পুনরায় সেট করা প্রয়োগ করে সেই পাঠেরিয়ার সীমানা কম রেন্ডার হবে। সুতরাং এটি সত্য রিসেট নয়। আমি এটি যত্নশীল কেবলমাত্র কয়েকটি বৈশিষ্ট্যের জন্য ব্যবহার করে শেষ করেছি। আপনি সমস্ত উপাদানগুলিকে পুনরায় সেট করতে বা নির্দিষ্ট উপাদানটির অভ্যন্তরে সমস্ত উপাদান পুনরায় সেট করতে * নির্বাচনকারীর সাথে এটিও একত্র করতে পারেন।

— ব্যবহারকারী566245

@ user566245 * কোনও নির্বাচকের সাথে এটি প্রয়োগ করা আপনার ব্রাউজার এবং একটি বিড়ালছানাটিকে হত্যা করবে। এটি সত্যিকারের রিসেট নয়। সত্য পুনরায় সেট করার অস্তিত্ব নেই।

— মিলচে প্যাটার্ন

@ মিলকিওয়েস্প্যাটার্নস লল, আপনি সম্ভবত সঠিক আছেন। আমার জন্য আমি কেবল সেই বৈশিষ্ট্যগুলি নিয়েছি যা আমি পুনরায় সেট করতে চেয়েছিলাম এবং "ডিভ # theid *" এ প্রয়োগ করেছি। আশা করি এটি কারও বিড়ালছানাটিকে হত্যা করবে না :)

— ব্যবহারকারীর 5664545

@ জেরেমি: আপনি ব্রাউজারের ডিফল্টগুলির কথা ভাবছেন যা বিভিন্ন উপাদানগুলির জন্য পরিবর্তিত হয়। যে উপাদানটিতে এটি প্রয়োগ করা হচ্ছে তা নির্বিশেষে প্রদর্শনের প্রাথমিক মান সর্বদা ইনলাইন থাকে।

— BoltClock

@ মিম্মশুদ্ধুপ টিপটির জন্য ধন্যবাদ। আপনি যদি আসল উত্তরটি একবার দেখুন, আমি এটি সিএসএসের মতো সংস্কার করেছি। সংক্ষেপণের জন্য, ভাল, এটি একটি উত্তর, কোনও অনুলিপি-পেস্ট প্যাচ নয়। তাই না?

— মিলচে প্যাটার্ন

Answer 2

ভবিষ্যতের পাঠকদের জন্য। আমি মনে করি এটি যা বোঝানো হয়েছিল কিন্তু বর্তমানে এটি সত্যই প্রশস্ত নয় (নীচে দেখুন):

#someselector {
  all: initial;
  * {
    all: unset;
  }
}

• সমর্থিত ( উত্স) ) এ : ক্রোম 37, ফায়ারফক্স 27, আইই 11, অপেরা 24
• সমর্থিত নয়: সাফারি

Comments

উৎস দাবী যে ইন্টারনেট এক্সপ্লোরার সমর্থন করে না all।

— ড্যান ড্যাসক্লেস্কু

শেষ পর্যন্ত। এটি নতুন গৃহীত উত্তর হওয়া উচিত।

— JS_Riddler

মাইক্রোসফট তালিকা allযেমন বিবেচনা অধীন । এজ এর ভবিষ্যতের সংস্করণ এটির পক্ষে ভালভাবে সমর্থন করতে পারে।

— কেভিন

আমি কেবল "উত্তরাধিকার সূত্রে প্রাপ্ত বৈশিষ্ট্যগুলিতে পড়ি, প্রাথমিক মানটি অবাক হতে পারে এবং এর পরিবর্তে উত্তরাধিকারী, আনসেট করা বা কীওয়ার্ডগুলি পুনরায় সরিয়ে ফেলার কথা বিবেচনা করা উচিত Also এছাড়াও, এটি কি ব্রাউজার-নির্দিষ্টে ফিরে আসে? যেখানে এই প্রাথমিক প্রাথমিকটি সেট করা আছে .. ...? ডিডিটি?

— মিলচে প্যাটার্ন

আমি নেস্টেড সিএসএসের মতো একমাত্র জায়গা #someselector { ... * { all: unset; } ... }সাসে। আপনি এখানে সাসের কথা উল্লেখ করেন নি - এটি কি নতুন কোনও CSS3 জিনিস? "নেস্টেড সিএসএস" অনুসন্ধান করা সবেমাত্র আমাকে এন্ট্রি-স্তরের টিউটোরিয়াল এবং স্যাসের তথ্য দেয়। ... * { ... } ...আমার সিএসএসে (এইচটিএমএল 5) এ নেস্টেড অংশ যুক্ত করা আমার দস্তাবেজকে ভেঙে দেয় (আমার সন্তানের উপাদানগুলি স্বতন্ত্রভাবে শৈলীতে পিতামাতার কাছে আমি প্রয়োগ করতে চেয়েছিলাম)।

— i336_

Answer 3

এই সমস্যার একটি নতুন সমাধান পাওয়া গেছে।

ব্যবহার করুন all: revertবা all: unset।

এমডিএন থেকে:

রিভার্ট কীওয়ার্ডটি অনেক ক্ষেত্রে আনসেটের মতো একই কাজ করে। পার্থক্য কেবলমাত্র এমন বৈশিষ্ট্যগুলির জন্য যা ব্রাউজার দ্বারা সেট করা মান বা ব্যবহারকারীদের দ্বারা তৈরি কাস্টম স্টাইলশিটগুলি (ব্রাউজারের পাশে সেট করা)।

আপনার প্রয়োজন "একটি সিএসএস বিধি উপলভ্য যা কোনও নির্দিষ্ট উপাদানের জন্য স্টাইলশীটে পূর্ব নির্ধারিত যে কোনও শৈলী সরিয়ে ফেলবে" "

সুতরাং, যদি উপাদানটির শ্রেণীর নাম থাকে তবে remove-all-styles:

উদাহরণ:

এইচটিএমএল:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

সিএসএস সহ:

  .remove-all-styles {
    all: revert;
  }

প্রয়োগ সমস্ত শৈলী পুনরায় সেট করবে other-class, another-classএবং সমস্ত অন্যান্য উত্তরাধিকারসূত্রে এবং যে শৈলী প্রয়োগ করা হয়েছে div।

বা আপনার ক্ষেত্রে:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

করব.

এখানে আমরা একটি দুর্দান্ত সিএসএস সম্পত্তি অন্য দুর্দান্ত সিএসএস মান সহ ব্যবহার করেছি।

1. revert

প্রকৃতপক্ষে revert, নামটি যেমন বলে, সেই সম্পত্তিটিকে তার ব্যবহারকারী বা ব্যবহারকারী-এজেন্ট শৈলীতে ফিরিয়ে দেয়।

2. all

আর যখন আমরা ব্যবহার revertসঙ্গে allসম্পত্তি, যে উপাদান প্রয়োগ সব সিএসএস বৈশিষ্ট্য ব্যবহারকারী / ব্যবহারকারী-এজেন্ট শৈলীতে পুনরুদ্ধার করা হবে।

লেখক, ব্যবহারকারী, ব্যবহারকারী-এজেন্ট শৈলীর মধ্যে পার্থক্য জানতে এখানে ক্লিক করুন।

উদাহরণস্বরূপ: যদি আমরা এম্বেড থাকা উইজেট / উপাদানগুলিকে পৃষ্ঠার শৈলীগুলি থেকে আলাদা করতে চাই তবে আমরা লিখতে পারি:

.isolated-component {
 all: revert;
}

যা সমস্ত author styles(অর্থাত্ বিকাশকারী সিএসএস ) গুলিতে ( user stylesআমাদের ওয়েবসাইটের user-agentকোনও ব্যবহারকারী সেট করা শৈলীতে - সম্ভবত সম্ভাবনার দৃশ্যে) বা কোনও ব্যবহারকারী শৈলী সেট না করে যদি নিজেকে স্টাইলগুলিতে রূপান্তরিত করে।

আরও বিশদ এখানে: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

এবং কেবল ইস্যুটিই সমর্থন : কেবলমাত্র সাফারি 9.1 এবং আইওএস সাফারি 9.3 revertর লেখার সময় মানটির জন্য সমর্থন রয়েছে ।

সুতরাং আমি এই স্টাইলটি ব্যবহার করব এবং অন্য কোনও উত্তরে ফ্যালব্যাক বলব।

Comments

দুর্দান্ত হবে, তবে দুর্ভাগ্যক্রমে ব্রাউজার সমর্থনটিতে এখনও ছিদ্র রয়েছে: ক্যানিউস.com / #feat=css- সমস্ত (যদিও ক্যানিউজ শো তুলনায় ছোট, উদাহরণস্বরূপ all: initialএবং all: unsetএমএস এজ 16 এ আমার জন্য কাজ করেছেন)।

— রবার্ট কুজনিয়ার

Answer 4

আমাকে এই প্রশ্নের পুরোপুরি উত্তর দিন, কারণ এটি বেশ কয়েক বছর ধরে আমার জন্য ব্যথার কারণ হয়ে দাঁড়িয়েছে এবং খুব কম লোকই সত্যিই সমস্যাটি বুঝতে পারে এবং কেন এটির সমাধান হওয়া গুরুত্বপূর্ণ। আমি যদি সিএসএস স্পেসের জন্য মোটামুটি দায়িত্বে থাকি তবে আমি স্পষ্টভাবে, বিব্রত হব, গত দশকে এটি সমাধান না করার জন্য।

সমস্যাটি

আপনার এইচটিএমএল ডকুমেন্টে মার্কআপ andোকানো দরকার এবং এটি একটি নির্দিষ্ট উপায়ে দেখা দরকার। তদুপরি, আপনার কাছে এই দস্তাবেজের মালিকানা নেই, সুতরাং আপনি বিদ্যমান শৈলীর বিধি পরিবর্তন করতে পারবেন না। স্টাইল শিট কী তা আপনার কোনও ধারণা নেই হতে পারে বা কী কী পরিবর্তিত হতে পারে সে ।

আপনি যখন অজানা তৃতীয় পক্ষের ওয়েবসাইটগুলি ব্যবহারের জন্য প্রদর্শনযোগ্য উপাদান সরবরাহ করছেন তখন এর জন্য কেসগুলি ব্যবহার করুন। এর উদাহরণগুলি হ'ল:

1. একটি বিজ্ঞাপন ট্যাগ
2. ব্রাউজারের এক্সটেনশন তৈরি করা যা সামগ্রী অন্তর্ভুক্ত করে
3. যে কোনও ধরণের উইজেট

সিম্পল ফিক্স

একটি আইফ্রেমে সবকিছু রাখুন। এটির নিজস্ব সীমাবদ্ধতার সেট রয়েছে:

1. ক্রস ডোমেন সীমাবদ্ধতা: আপনার সামগ্রীতে মূল দস্তাবেজটিতে মোটেই অ্যাক্সেস থাকবে না। আপনি সামগ্রীতে ওভারলে করতে পারবেন না, ডিওএম সংশোধন করতে পারেন ইত্যাদি
2. প্রদর্শন সীমাবদ্ধতা: আপনার সামগ্রীটি একটি আয়তক্ষেত্রের ভিতরে লক করা আছে।

আপনার বিষয়বস্তু যদি পারেন একটি বক্স মধ্যে মাপসই করা, আপনি আপনার বিষয়বস্তু লেখ একটি iframe থাকার এবং স্পষ্টভাবে বিষয়বস্তু নির্ধারণ করে, এইভাবে ইস্যু প্রায় কিনারা দ্বারা দেখতে পারেন # 1 সমস্যা থেকে আইফ্রেম এবং নথি একই ডোমেনে ভাগ করবে।

সিএসএস সলিউশন

আমি এর সমাধানের জন্য বহুদূর অনুসন্ধান করেছি, তবে দুর্ভাগ্যক্রমে এর কোনটিই নেই। আপনি যেটি করতে পারেন সেরা তা স্পষ্টভাবে সমস্ত সম্ভাব্য বৈশিষ্ট্যগুলিকে ওভাররাইড করা যায় যা ওভাররাইড করা যেতে পারে এবং আপনার মনে হয় সেগুলিকে ওভাররাইড করে তাদের ডিফল্ট মান হতে হবে।

এমনকি আপনি ওভাররাইড করার পরেও, কোনও লক্ষ্যযুক্ত সিএসএস নিয়ম আপনার ওভাররাইড করবে না তা নিশ্চিত করার কোনও উপায় নেই । আপনি এখানে সর্বোত্তম কাজটি করতে পারেন যা আপনার ওভাররাইড বিধিমালাগুলিকে যথাসম্ভব লক্ষ্য হিসাবে লক্ষ্য করা উচিত এবং আশা করি অভিভাবক দলিলটি দুর্ঘটনাক্রমে এটি সর্বোত্তমভাবে না ঘটায়: আপনার সামগ্রীর মূল উপাদানটিতে একটি অস্পষ্ট বা র্যান্ডম আইডি ব্যবহার করুন এবং সমস্ত সম্পত্তি মান সংজ্ঞাতে গুরুত্বপূর্ণ! ।

Comments

আপনি সমস্ত সম্পত্তি ব্যবহার করতে পারেন , যা সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত ।

— ড্যান ড্যাসক্লেস্কু

এই সাধারণ সমস্যার যথাযথ সমাধান হ'ল ওয়েব উপাদানগুলি

— getFree

এটি একটি খুব বাস্তব সমস্যা, তবে কেবল দুর্বল বিকাশিত সিএসএসের ফলস্বরূপ কেবল সর্বদা প্রথম স্থানে রয়েছে। আপনি যদি মার্কআপ এবং সিএসএস তৈরি করে থাকেন, যদি আপনি এটি যথাযথভাবে করে থাকেন তবে আপনার স্টাইলগুলির কোনওটিই তৃতীয় পক্ষের অ্যাপ্লিকেশনটিতে রক্তাক্ত হওয়া উচিত নয়। আমি যদি সিএসএস অনুমানের জন্য দায়ী থাকি তবে আমি বিব্রত হব না, তবে বিরক্ত লোকেরা আমার তৈরি যা নির্মমভাবে অপব্যবহার করছে।

— ইএসআর

@ ড্যানডাসকলেসকু সমস্ত সম্পত্তি "ডিফল্ট" ব্রাউজার সিএসএস শৈলীতে ফিরে যাবে না। এটি কেবল "প্রাথমিক" সিএসএস শৈলীতে ফিরে যেতে চলেছে। পার্থক্যটি হ'ল একটিকে পৃষ্ঠাটি এমন স্টাইল করে যেন কোনও সিএসএসের অস্তিত্ব নেই, অন্যটি উপাদান শৈলী ব্যবহার করবে (i, e, p { color: blue}পুনরায় সেট করা হবে না)

— ক্যামেরন

Answer 5

অন্য উপায়:

1) ইয়াহু সিএসএস রিসেটের সিএসএস কোড (ফাইল) অন্তর্ভুক্ত করুন এবং তারপরে সবকিছু এই ডিআইভির ভিতরে রাখুন:

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2) বা ব্যবহার

• https://cssreset.com/scripts/vanilla-css-un-reset/
• https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
• https://cssreset.com/scripts/eric-meyer-reset-css/
• https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
• https://cssreset.com/scripts/normalize-css/

Answer 6

আমি যে উত্তরটি এখানে সঠিক হিসাবে চিহ্নিত করা হয়েছে তা ব্যবহার করার পরামর্শ দিচ্ছি না। এটি সিএসএসের একটি বিশাল ব্লব যা সবকিছু coverেকে দেওয়ার চেষ্টা করে।

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

এসইও উদ্দেশ্যে বলতে দিন আপনার একটি পৃষ্ঠায় এইচ 1 অন্তর্ভুক্ত করা দরকার যা ডিজাইনের কোনও আসল শিরোনাম নেই। আপনি page পৃষ্ঠার ন্যাভ লিঙ্কটিকে এইচ 1 তৈরি করতে চাইতে পারেন তবে অবশ্যই আপনি চাইছেন না যে নেভিগেশন লিঙ্কটি পৃষ্ঠায় একটি বিশাল এইচ 1 হিসাবে প্রদর্শিত হবে।

আপনার যা করা উচিত তা হ'ল এলিটটিকে এইচ 1 ট্যাগে মোড়ানো এবং এটি পরীক্ষা করা। এইচ 1 উপাদানটিতে সিএসএস শৈলীগুলি বিশেষত কীভাবে প্রয়োগ করা হচ্ছে তা দেখুন।

আসুন বলি যে আমি নীচের শৈলীর উপাদানটিতে প্রয়োগ দেখতে পাচ্ছি।

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

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

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

এটি অনেক পরিষ্কার এবং এটি কেবল আপনার সিএসএসে কোডের একটি এলোমেলো ব্লব ডাম্প করে না যা আপনি জানেন না যে এটি আসলে কী করছে।

এখন আপনি এইচ 1 এ এই শ্রেণিটি যুক্ত করতে পারেন

<h1 class="no-style-h1">
     Title
</h1>

Answer 7

যদি আপনি কোনও বিল্ড সিস্টেমে সাস ব্যবহার করছেন, তবে এটি করার একটি উপায় যা সমস্ত প্রধান ব্রাউজারগুলিতে কাজ করবে তা হ'ল আপনার সমস্ত শৈলী আমদানি একটি দিয়ে আবৃত করা: এটির মতো (নির্বাচক নয়) ...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

তারপরে আপনি একটি ধারকটিতে অক্ষম শ্রেণীর ব্যবহার করতে পারেন এবং উপ-সামগ্রীটিতে আপনার কোনও স্টাইল থাকবে না।

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

অবশ্যই আপনার সমস্ত শৈলী এখন: (নির্বাচিত নয়) নির্বাচকের সাহায্যে সংশোধন করা হবে, সুতরাং এটি কিছুটা পলকভাবে, তবে ভালভাবে কাজ করে।

Answer 8

আপনি মোবাইল-প্রথম সাইটগুলি উল্লেখ করেছেন ... একটি প্রতিক্রিয়াশীল ডিজাইনের জন্য, অবশ্যই বড় স্ক্রিন শৈলীর সাথে ছোট-স্ক্রিন শৈলীগুলি ওভাররাইড করা সম্ভব। তবে আপনার প্রয়োজন হতে পারে না।

এটা চেষ্টা কর:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

এই মিডিয়া প্রশ্নগুলি ওভারল্যাপ হয় না, সুতরাং তাদের বিধিগুলি একে অপরকে ওভাররাইড করে না। এটি স্টাইলগুলির প্রতিটি সেট আলাদাভাবে বজায় রাখা সহজ করে তোলে।

Answer 9

উত্তম সমাধান

সিএসএস বৈশিষ্ট্যগুলি ডিফল্ট (ইউএ শৈলীতে) পুনরায় সেট করতে "অনুলিপি / পেস্ট" স্টাইলশিটটি ডাউনলোড করুন:
https://github.com/monmomo04/resetCss.git

ধন্যবাদ @ মিলচে প্যাটার্ন!
আমি সত্যিই রিসেট / ডিফল্ট শৈলীর বৈশিষ্ট্যের মান খুঁজছিলাম। আমার প্রথম চেষ্টাটি ছিল মূল (এইচটিএমএল) উপাদানটির ব্রাউজার ডেভ সরঞ্জাম থেকে গণিত মানটি অনুলিপি করা। তবে এটি গণনা করার সাথে সাথে এটি প্রতিটি সিস্টেমে আলাদাভাবে দেখে / কাজ করত।
বাচ্চাদের উপাদানগুলির স্টাইলটি পুনরায় সেট করতে যখন তারকাচিহ্ন * ব্যবহার করার চেষ্টা করার সময় ব্রাউজার ক্র্যাশের মুখোমুখি হয় এবং আমি জানি যে এটি আপনার পক্ষে কাজ করে না, আমি তার পরিবর্তে সমস্ত এইচটিএমএল ট্যাগের সাথে তারকাচিহ্ন "*" প্রতিস্থাপন করেছি । ব্রাউজারটি ক্রাশ হয়নি; আমি ক্রোম সংস্করণে 46.0.2490.71 মি।
শেষ অবধি, এটি উল্লেখ করা ভাল যে এই বৈশিষ্ট্যগুলি শৈলীর শীর্ষস্থানীয় মূলের ডিফল্ট স্টাইলে পুনরায় সেট করবে তবে প্রতিটি এইচটিএমএল উপাদানের প্রাথমিক মান নয়। সুতরাং এটি সংশোধন করার জন্য, আমি ওয়েবকিট ভিত্তিক ব্রাউজারের "ব্যবহারকারী-এজেন্ট" শৈলী নিয়েছি এবং এটি "রিসেট-এটি" শ্রেণীর আওতায় প্রয়োগ করেছি।

দরকারী লিঙ্ক:

সিএসএস বৈশিষ্ট্যগুলি ডিফল্ট (ইউএ শৈলীতে) পুনরায় সেট করতে "অনুলিপি / পেস্ট" স্টাইলশিটটি ডাউনলোড করুন:
https://github.com/monmomo04/resetCss.git

ব্যবহারকারী-এজেন্ট শৈলী:
এইচটিএমএল উপাদানগুলির জন্য ব্রাউজারগুলির ডিফল্ট সিএসএস
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

CSS স্পেসিফিকেশন (নির্দিষ্টকরণের দিকে মনোযোগ দিন):
https://css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git

Answer 10

আমার নির্দিষ্ট দৃশ্যে আমি পৃষ্ঠার নির্দিষ্ট অংশে সাধারণ স্টাইল প্রয়োগ করা এড়াতে চেয়েছিলাম, এর চেয়ে আরও ভাল চিত্রিত:

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

সিএসএস রিসেটের সাথে ঝামেলা করার পরে যা খুব বেশি সাফল্য আনেনি (মূলত নিয়মগুলির প্রাধান্য এবং জটিল স্টাইলশীট শ্রেণিবিন্যাসের কারণে), সর্বপরিবর্তিত jQuery কে উদ্ধারকাজে নিয়ে আসে, যা কাজটি খুব দ্রুত এবং যুক্তিসঙ্গত নোংরা কাজ করে:

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(এখন সিএসএস মোকাবেলা করতে জেএস ব্যবহার করা কতটা খারাপ তা বলুন :-))

Answer 11

আপনারা যারা ফাইলগুলি থেকে সিএসএস না সরিয়ে কেবলমাত্র উপাদান থেকে স্টাইলিংটি সরিয়ে ফেলবেন তা বোঝার চেষ্টা করছেন, এই সমাধানটি jquery নিয়ে কাজ করে:

$('.selector').removeAttr('style');

Answer 12

আপনি যদি নিজের সিএসএস ক্লাসের মধ্যে সেট করেন তবে আপনি jQuery সরানো ক্লাস () পদ্ধতি ব্যবহার করে সহজেই এগুলি সরাতে পারেন। নীচের কোডটি। এলিমেন্ট ক্লাসটি সরিয়ে দেয়:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

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

Answer 13

না, এটি আপনার সিএসএস কাঠামোটিকে আরও ভালভাবে পরিচালনা করার বিষয়।

আপনার ক্ষেত্রে আমি আমার সিএসএসকে এই জাতীয় কিছু অর্ডার করব:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

শুধু পরীক্ষা।

Answer 14

যে কোনও সুযোগ আপনি খুঁজছেন? গুরুত্বপূর্ণ নিয়ম? এটি সমস্ত ঘোষণা পূর্বাবস্থায় ফিরে আসে না তবে এটি সেগুলিকে ওভাররাইড করার একটি উপায় সরবরাহ করে।

"যখন একটি স্টাইলের ঘোষণায় একটি গুরুত্বপূর্ণ নিয়ম ব্যবহার করা হয়, তখন এই ঘোষণাটি সিএসএসে করা অন্য যে কোনও ঘোষণাকে ঘোষণার তালিকায় যেখানেই থাকুক না কেন, ততটাই ওভার্রাইড করে Although যদিও,! নির্দিষ্টতার সাথে গুরুত্বপূর্ণ কিছু করার নেই।"

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception

Comments

আমদানিকারীরা যাওয়ার উপায় নয়। এটি ব্যবহারে সাহসী এবং আপনার এটি কেবল সর্বশেষ অবলম্বন হিসাবে ব্যবহার করা উচিত (উদাহরণস্বরূপ, যখন একটি প্লাগইন একটি গুরুত্বপূর্ণও ব্যবহার করে)

— মার্টেন ওল্ফসেন