এইচটিএমএল উপাদানগুলির জন্য ব্রাউজারগুলির ডিফল্ট সিএসএস


146

এইচটিএমএল উপাদানগুলির জন্য আমি ব্রাউজারের ডিফল্ট সিএসএস কোথায় পেতে পারি?

অনেক HTML উপাদান কিছু ডিফল্ট সিএসএস বৈশিষ্ট্য নিয়ে আসে যা কখনও কখনও অজানা / অযাচিত আচরণের ফলস্বরূপ হতে পারে। উদাহরণস্বরূপ ইনপুট বাক্সগুলি বিভিন্ন ব্রাউজারে আলাদাভাবে প্রদর্শিত হয়। আমি এমন একটি জায়গা খুঁজছি যা নতুন সিএসএস 3 বৈশিষ্ট্য এবং নতুন এইচটিএমএল 5 উপাদানকে কভার করবে।

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

সুতরাং, এমন কোনও সাইট আছে যা আমাকে এই সমস্ত তথ্য (বা সম্ভবত বেশিরভাগ) দিতে পারে?


3
কোনও সাইট নয় ক্রোম ডেভিলোপার সরঞ্জামগুলিতে এটি উত্তরাধিকার সূত্রে প্রাপ্ত CSS বিধিগুলি দেখায় এবং "ব্যবহারকারী এজেন্ট স্টাইলসীট" চিহ্নিত চিহ্নিতগুলি ক্রোমগুলি দেখায়। দুঃখিত আমি আরও সাহায্য হতে পারে না। এছাড়াও: dowebsitesneedtooookesxactlythesameineverybrowser.com
জেমস খুরি

2
দুর্দান্ত প্রশ্ন! আমি সম্মত হই, কোথাও কোথাও না কোথাও এই তথ্যটি উপলব্ধ।

কেবল একটি নোট, রিসেট.এসএস মূল জিনিসগুলি থামায় না। আপনার ইনপুট বাক্সগুলি ক্রোমে হাইলাইট করা হবে। আপনি কেবল ব্রাউজার জুড়ে এলোমেলো প্যাডিং-পার্থক্য হারাবেন। সুতরাং আপনি সমস্ত ব্রাউজারে একই আচরণ (প্যাডিং / মার্জিন / ... বুদ্ধিমান) দিয়ে শুরু করতে পারেন।
জুলে

1
@ জামেস খুরি - ফায়ারব্যাগের ক্ষেত্রেও এটি সত্য।
রব

@ রব অবশ্যই! আমি ফায়ারব্যাগ সম্পর্কে ভুলে গিয়েছিলাম
জেমস খুরি

উত্তর:


93

সমস্ত ডাব্লু 3 সি এইচটিএমএল স্পেক এবং বিক্রেতার ডিফল্ট সিএসএস স্টাইলশিটগুলির একটি গিথহব সংগ্রহস্থল এখানে পাওয়া যাবে

1. ফায়ারফক্স জন্য ডিফল্ট শৈলী

2. ইন্টারনেট এক্সপ্লোরার জন্য ডিফল্ট স্টাইল

৩. ক্রোম / ওয়েবকিটের জন্য ডিফল্ট স্টাইল

4. অপেরা জন্য ডিফল্ট শৈলী

5. এইচটিএমএল 4 (ডাব্লু 3 সি স্পেস) এর জন্য ডিফল্ট স্টাইল

6. HTML5 এর জন্য ডিফল্ট শৈলী (W3C এর বৈশিষ্ট)

নমুনা, প্রতি ডিফল্ট ডাব্লু 3 সি এইচটিএমএল 4 স্পেস:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}

সাইড নোটে, nobrডাব্লু 3 সি এর এইচটিএমএল 5 স্টাইলশিটে কুখ্যাত ট্যাগের মতো জিনিসগুলি দেখতে আকর্ষণীয় ।
tomasz86

এখনও আপ টু ডেট?
ওয়েবউইম

ফায়ারফক্সের লিঙ্কটিতে সমস্ত ডিফল্ট নেই। উদাহরণস্বরূপ, এটি টেক্সেরিয়ার জন্য ডিফল্ট সিএসএস ধারণ করে না। আপনি এটি রিসোর্সটিতে খুঁজে পেতে পারেন: //gre-resources/forms.css। সাধারণভাবে, সমস্ত ডিফল্ট তথ্য সন্ধান করতে রিসোর্স: // গ্রে-রিসোর্সগুলিতে ফাইলগুলি ব্রাউজ করুন। বা সমস্ত ব্রাউজারের জন্য, html.spec.whatwg.org/multipage/rendering.html দেখুন
ডেভিড স্পেক্টর

117

এটি প্রতিটি ব্রাউজারের জন্য আলাদা so

আপনি এইচটিএমএল 5 বয়লারপ্লেট স্টাইলশিটটিও দেখতে পারেন , যা "প্রচলিত অর্থে রিসেট না হয়ে প্রচুর স্টাফের প্রদর্শনকে স্বাভাবিক করে তোলে"। এটি বেশ কয়েকটি বাগ / অসঙ্গতিও ঠিক করে দেয়।

এটি দেখার মতো: https://github.com/necolas/normalize.css/blob/master/normalize.css


2
উপরের সাথে যুক্ত প্রশ্নের সাথে আমার জবাবে আমি যে লিঙ্কটি সংযুক্ত করেছি, বেশিরভাগই একই জিনিস যা আপাতদৃষ্টিতে 'তারিখের বাইরে'। যদিও আমি 2 দিন আগে কেবল আইই লিঙ্কটি যুক্ত করেছিলাম।
রবার্টক

1
@ নায়েশ ব্রাউজারের ডিফল্টগুলি বাদে আর কী আছে বলে আপনি মনে করেন?
রবার্টক

1
@ নায়িশ ব্রাউজাররা তাদের ডিফল্ট স্টাইলশিটগুলিতে যা প্রয়োগ করেছে তার বাইরে এইচটিএমএল উপাদানগুলির জন্য ডিফল্ট সিএসএসের আলাদা কোনও সংজ্ঞা নেই
রবার্টক

1
@ নায়েশ এটি প্রত্যেকটি পৃথক সম্পত্তির বিপরীতে উল্লিখিত হয়েছে , যদিও নোট করুন যে অস্বচ্ছতা সিএসএস অর্থে উত্তরাধিকার সূত্রে প্রাপ্ত নয়
রবার্টক

2
কেবল একটি নোট, এইচটিএমএল 5 বয়লারপ্লেট সিএসএসকে স্বাভাবিক করার চেয়ে অনেক বেশি। সিএসএসকে কেবলমাত্রায়িত করার জন্য তারা নরমালাইজ সরঞ্জামটি ব্যবহার করে: necolas.github.com/normalize.css
দেবের জন্য অপেক্ষা করছে ...

1

এজ এ সিএসএস ডিফল্টগুলির জন্য কেউ কোনও উত্স উল্লেখ করেনি। আমি তাকিয়েছিলাম, এবং আমি প্রামাণ্য কিছু খুঁজে পাইনি, কিন্তু আমি এই স্টাইলশীটটি দেখতে পেলাম যা দেখতে প্রশংসনীয়: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b


0

যদিও এটি একটি পুরানো ক্রস ব্রাউজার সমস্যা, যেমন প্রতিটি ব্রাউজারের মিডিয়া এবং ইনপুট উপাদানগুলির মতো কিছু এইচটিএমএল উপাদানগুলির সাথে তার নিজস্ব রেন্ডারিং এবং আচরণ থাকে, আমরা এখন 2017 এ তাদের নিরাপদে সিএসএস ফিল্টারগুলির স্বতন্ত্র ব্যবহার করতে পারি।

এটি হিউ-রোটেট ফিল্টারের সাথে একটি রঙিন প্যালেট দিতে দেয় যা ক্রস ব্রাউজারগুলিকে বেশ ভাল দেয়।

জাভাস্ক্রিপ্ট সহ কোনও ভিডিওর উপাদানটিতে রিয়েলটাইমে এই প্রভাবটি রেন্ডার করতে নীচের স্নিপেটগুলি একটি ইনপুট ধরণের রঙ ব্যবহার করার উপায় দেখায় ।

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

পাশাপাশি, ড্রপ-শ্যাডো ফিল্টারটি দুর্দান্তভাবে ক্রস ব্রাউজারে কাজ করছে। এটির মতো ব্যবহারের জন্য: ফিল্টার: ড্রপ-শ্যাডো (2px 20px 50px লাল) [এক্স, ওয়াই, রেডিয়াস, রঙ]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()
body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}
Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

আমি কি সিএসএস ফিল্টার ব্যবহার করতে পারি:

http://caniuse.com/#feat=css-filters

আমি সিএসএস ফিল্টারগুলির চারপাশে তৈরি একটি সরঞ্জামদণ্ড, কোথা থেকে এই নোটগুলি আসছে:

https://github.com/webdev23/ponyFilters

আরও একটি সম্পূর্ণ কোডেন উদাহরণ:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/


এটি কিছুটা দূরে মনে হয়, আপনি ঠিক বলেছেন! এই তারিখে এটি আমার কঠোর পরিশ্রম ছিল। যেহেতু এটি কেবল সিএসএস, এটি ব্রাউজারের উপাদান আচরণের পরিবর্তন করবে না, তবে তাদের প্রত্যেকটির জন্য বিশেষ কোড না লিখে কোনও ব্রাউজারে, এই জাতীয় উপাদানগুলিকে অভিন্ন রঙ / উজ্জ্বলতার সাথে রেন্ডার করার উপায় দিতে পারে। প্রশ্নের সময় এটি করণীয় ছিল না। ধন্যবাদ।
এনভিআরএম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.