একই আইডি বৈশিষ্ট্যযুক্ত দুটি HTML উপাদান: এটি আসলে কতটা খারাপ?

122

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

<div id="search" jstrack="1">
    <form action="/maps" id="...rest isn't important">
        ...
        <div id="search">...

যেহেতু এটি গুগল তাই আমি ধরে নিচ্ছি যে এটি কোনও ভুল নয়।

সুতরাং এই নিয়ম লঙ্ঘন করা সত্যিই কতটা খারাপ হতে পারে? যতক্ষণ আপনি আপনার সিএসএস এবং ডোম নির্বাচনের বিষয়ে সতর্ক হন, কেন আইডি এর ক্লাসগুলির মতো পুনরায় ব্যবহার করবেন না? কেউ উদ্দেশ্যমূলকভাবে এটি করে, এবং যদি তাই হয় তবে কেন?

programming-practices html specifications

— danludwig
সূত্র

102

"যেহেতু এটি গুগল তাই আমি ধরে নিচ্ছি যে এটি কোনও ভুল নয়।" -> গুগল অযোগ্য নয়। তারা আমাদের সবার মতো ভুল করে।

— জোয়েরি সেব্রেচটস

43

আসলে Google- এ না আছে সার্চ তাদের হৃদয় ও মন জয় নিরূদ্ধ তাই তারা অন্য কোন আইডি এর ভাবতে পারি না: P: P

— পঙ্কজ উপাধ্যায়

10

আমার অনুভূতি আছে যে পৃষ্ঠাটি বিভিন্ন এইচটিএমএল টুকরা থেকে রেন্ডার হয়েছে যাতে এক খণ্ডের একজন বিকাশকারী সেই আইডি ব্যবহার করেন এবং অন্য খণ্ডে অন্য বিকাশকারীদের সাথে একই ঘটনা ঘটে।

— লুসিয়ানো

10

"এটি আসলে কতটা খারাপ" এর পুরো প্রশ্নটি কেবল এটার

— ড্যানিয়েল রোজম্যান

3

@ ড্যানিয়েলরোজম্যান এক্স কেসিডি এটিও করেছে: কি-if.xkcd.com/23/# প্রশ্ন

— এসকিউবি

140

স্পেসিফিকেশন অনন্য বলে

এইচটিএমএল 4.01 স্পেসিফিকেশন বলছে আইডি অবশ্যই ডকুমেন্ট-বিস্তৃত অনন্য হতে হবে।

এইচটিএমএল 5 স্পেসিফিকেশন একই জিনিস বলে কিন্তু অন্য কথায়। এটি বলে যে আইডি অবশ্যই তার হোম সাবট্রিতে অনন্য হওয়া উচিত , যা মূলত এটির সংজ্ঞাটি পড়লে ডকুমেন্ট ।

অনুলিপি এড়াতে

এইচটিএমএল রেন্ডারাররা যেহেতু এইচটিএমএল রেন্ডারিংয়ের কথা আসে তখন তারা খুব ক্ষমা করে থাকে কারণ তারা নকল আইডির অনুমতি দেয়। প্রোগ্রামটিভভাবে জাভাস্ক্রিপ্টে আইডি দ্বারা উপাদানগুলিতে অ্যাক্সেস করার সময় যদি সম্ভব হয় এবং কঠোরভাবে এড়ানো যায় তবে এড়ানো উচিত । আমি নিশ্চিত নই যে getElementByIdবেশ কয়েকটি মিলের উপাদান পাওয়া গেলে কোন ফাংশনটি ফিরে আসবে? এটি করা উচিত:

একটি ত্রুটি ফিরে?
প্রথম মিলের উপাদানটি ফেরত দেবে?
শেষ ম্যাচিং উপাদান ফিরে?
মিলে যাওয়া উপাদানগুলির একটি সেট ফেরত দেবেন?
কিছু না ফেরত?

তবে আজকাল ব্রাউজারগুলি যদি নির্ভরযোগ্যভাবে কাজ করে তবে ভবিষ্যতে কেউ এই আচরণের গ্যারান্টি দিতে পারে না কারণ এটি নির্দিষ্টকরণের বিরোধী। এ কারণেই আমি আপনাকে একই ডকুমেন্টের মধ্যে আইডি সদৃশ করার অনুরোধ করি না ।

— রবার্ট কোরিটনিক
সূত্র

1

@ মিসিংনো: আমি এইচটিএমএল 5 স্পেসিফিকেশনের একটি লিঙ্ক যুক্ত করেছি যা একই জিনিস সম্পর্কে কথা বলে তবে ভিন্ন শব্দাবলীতে।

— রবার্ট কোরিটনিক

6

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

— একাকী দিন

1

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

— টিম পোস্ট

2

@ জোয়াচিমসৌয়ার: আপনি যখন ডেটা অ্যাট্রিবিউট ব্যবহার করেন তখন কী-ভ্যালু জুটি থাকতে পারে যা আপনি সিএসএস ক্লাস ব্যবহার করার সময় সত্য নয়। সেক্ষেত্রে তারা সবাই বুলিয়ান সম্পত্তি হিসাবে। একটি উপাদান হয় একটি সিএসএস বর্গ আছে বা না। আপনি যদি সিএসএস ক্লাসের সাথে মানগুলি চান তবে আপনাকে সেগুলি কোনওভাবে CSS শ্রেণীর নামের সাথে একত্রিত করতে হবে এবং এর পরে পার্স করতে হবে। আমি আশা করি আপনি এখন dataগুণাবলী ব্যবহারের সুবিধা দেখতে পাবেন । আপনি যখন data-something="123"এট্রিবিউটটি কেবলমাত্র উল্লেখ করেন তখন jQuery দ্বারা এগুলি সরাসরি বক্সের বাইরেও সমর্থিত হয় $(elem).data("something")।

— রবার্ট কোরিটনিক

1

@ রবার্টকরিটনিক: অবশ্যই! আমি এই ব্যবহারের ক্ষেত্রে ভাবিনি। আমি কেবল এর কেস নিয়ে ভেবেছিলাম id="search"।

— জোচিম সউর

30

আপনি "কতটা খারাপ" জিজ্ঞাসা করেছেন। সুতরাং @ রবার্টকরিটনিকের (সম্পূর্ণ নির্ভুল) কিছুটা উত্তর দেওয়ার জন্য ...

এই কোডটি ভুল। ভুল ধূসর ছায়ায় আসে না। এই কোডটি মানটিকে লঙ্ঘন করে এবং তাই ভুল। এটি বৈধতা যাচাই করতে ব্যর্থ হবে এবং এটি হওয়া উচিত।

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

সিএসএস বা জাভাস্ক্রিপ্টে যে আইডিটিকে নির্বাচক হিসাবে ব্যবহার করার চেষ্টা করছেন আপনার আচরণ অস্পষ্ট এবং এটি সম্ভবত ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হয়। আমি মনে করি প্রতিটি ব্রাউজার এতে কীভাবে প্রতিক্রিয়া দেখায় তা দেখার জন্য একটি গবেষণা করা যেতে পারে। আমি মনে করি সর্বোত্তম ক্ষেত্রে এটি "শ্রেণি =" এর মতো আচরণ করবে এবং তাদের তালিকাটি নির্বাচন করবে। (এটি জাভাস্ক্রিপ্ট লাইব্রেরিগুলিকে বিভ্রান্ত করতে পারে, যদিও - আমি যদি jQuery এর লেখক হতাম তবে আমি আমার নির্বাচক কোডটি অনুকূল করে তুলতে পারি যাতে আপনি যদি আমার কাছে "#" দিয়ে কোনও নির্বাচক দিয়ে এসে থাকেন তবে আমি একটি একক অবজেক্ট আশা করি এবং একটি পেয়ে যাব তালিকা আমাকে পুরোপুরি বিরক্ত করতে পারে।)

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

"কতটা খারাপ" তারপরে কোনও নির্দিষ্ট ব্রাউজার এইচটিএমএল স্পেকটি কতটা কঠোরভাবে প্রয়োগ করে এবং সেই অনুমানের লঙ্ঘনের মুখোমুখি হলে এটি কী করে তা পুরোপুরি নির্ভর করে।

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

JQuery যা করছে বলে মনে হচ্ছে তা আমাকে প্রথম নির্বাচন করছে, যা সব ক্ষেত্রে হ'ল আমি চাই না।

আমি আমার ক্ষেত্রটি (যেমন: $ ('# ধারকডিভ # স্পেসিফিকেলমেন্ট')) পেতে চাইলে পৃষ্ঠার অঞ্চলটি নির্দিষ্ট করতে নির্বাচকদের লিখে এটিকে ঘিরে কাজ করছি। তবে আপনার প্রশ্নের একটি উত্তর রয়েছে - এই নির্দিষ্ট লঙ্ঘনের সাথে যখন মুখোমুখি হন তখন ক্রোমের জিকুয়েরি অবশ্যই একটি নির্দিষ্ট আচরণ করে।

— ড্যান রে
সূত্র

... সম্পর্কিত প্রশ্ন: একটি সিএসএস ফাস্ট প্রোফাইলে আইডি বাধ্যবাধকতা সম্পর্কে stackoverflow.com/q/29295824/287948 ।

— পিটার ক্রাউস

3

"ভুল ধূসর ছায়ায় আসে না।" আমি এটি অনেক কিছুই দেখতে পাই এবং প্রযুক্তিগতভাবে সঠিক হলেও এটি জীবনে বা প্রোগ্রামিংয়ে "সত্য" নয় এমন একটি বিষয়। আপনি অপ্রত্যক্ষভাবে আপনার উত্তরে এটি পুরোপুরিভাবে কভার করেন এবং আমি ব্যাখ্যা করতে পারি তবে বিগ ব্যাং থিওরির এই দৃশ্যটি এত ভাল কাজ করেছে যে আমি এটি আমার পক্ষে কথা বলব এবং আশা করি কাউকে হাসি দেব ... স্টুয়ার্ট বনাম শেল্ডন youtube.com/ দেখুন? v = F_1zoX5Ax9U

— রাতের আউল

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

— ইরানড্রোস

20

এটা আসলে কত খারাপ?

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

অভিজ্ঞতা বলেছে যে প্রধান ব্রাউজারগুলিতে getElementById নথিতে প্রথম মিলিত উপাদানটি ফিরিয়ে দেবে। তবে ভবিষ্যতে এটি সবসময় নাও হতে পারে।

যখন jQuery কে আইডি দেওয়া হয় যেমন #foo, তখন এটি getElementById ব্যবহার করে এবং সেই আচরণের নকল করে। আপনার যদি এটিকে ঘিরে কাজ করতে হয় (দুঃখের বিষয়) তবে আপনি $ (" * #foo") ব্যবহার করতে পারেন যা jQuery কে getElementsByTagName ব্যবহার করতে রাজি করবে এবং সমস্ত মিলিত উপাদানগুলির একটি তালিকা ফিরিয়ে দেবে।

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

— ColBeseder
সূত্র

5

এই উত্তরটি আমাকে কাঁদে ... হাসির!

— আরপুন

8

আপনি দুর্দান্ত কিছু করতে পারেন - তবে এর অর্থ এই নয় যে আপনার উচিত।

প্রোগ্রামার হিসাবে (সাধারণভাবে বলা হয়) আমরা সঠিকভাবে এবং বিধি অনুসরণের উপর আমাদের জীবন গড়ে তুলি - এখানে একটি নিয়ম অনুসরণ করা সহজ যা আমরা যা করি তার জন্য এটি মোটামুটি মৌলিক - আমরা একটি নির্দিষ্ট সুযোগের মধ্যে অনন্য শনাক্তকারীদের পছন্দ (উপর নির্ভরশীল) করি ( ...

নিয়ম ভঙ্গ করা এমন কিছু যা আমরা করতে পারি কারণ ব্রাউজারটি খুব উপযোগী হয় - তবে ব্রাউজারগুলি যদি ভালভাবে তৈরি হয় এবং বৈধ এইচটিএমএল প্রয়োজনের বিষয়ে কঠোর হয় তবে এর ফলে যে অল্প পরিমাণে ব্যথা হত তা দীর্ঘকাল হতে পারত শোধ করা হয়েছে!

তো, এটা কি আসলেই খারাপ? প্রোগ্রামার হিসাবে আপনি কীভাবে জিজ্ঞাসা করতে পারেন? এটি সভ্যতার বিরুদ্ধে অপরাধ (-:

সংযোজন:

আপনি লিখেছেন যে ব্রাউজারগুলি এটি খারাপ জিনিস এর মতো খুব সামঞ্জস্য করে

আমি করি, কারণ এটি - আমরা জটিল বিধি সম্পর্কে কথা বলছি না, আমরা জিনিসগুলি ভালভাবে তৈরি করা এবং অন্যথায় যান্ত্রিকভাবে পরীক্ষা করা যেতে পারে এমন নিয়ম প্রয়োগ করা এবং ফলস্বরূপ প্রক্রিয়াটি যান্ত্রিকভাবে প্রক্রিয়াজাতকরণকে আরও সহজ করে তোলে এমন বিষয়ে প্রয়োগ করছি। যদি ব্রাউজারগুলি কঠোর হয় তবে সরঞ্জামগুলি খুব দ্রুত সমর্থন করতে পেরেছিল এটি সমর্থন করার জন্য - এটি এতটা না তাই ছিল, কিছু তারা তার ব্যর্থতার পরিবর্তে যে পরিমাণে শোষণ করেছিল। এই বিষয়ে একটু চিন্তা করুন - এমএস এবং নেটস্কেপ যদি অনিচ্ছাকৃত এইচটিএমএলকে অনুমতি প্রদানের মাধ্যমে এটিকে তত্পর না করে থাকে তবে উদ্ধৃত পাঠ্যের সুস্পষ্ট সমর্থন সহ কোনও কম জটিল "ইমেল মার্কআপ ল্যাঙ্গুয়েজ" আমাদের আরও একটি ভাল সরঞ্জাম দিত email ... তবে সেই জাহাজটি যাত্রা করেছিল এবং একইভাবে আমরাও পারি 'থাকা উচিত ) তবে আমরা পারি না

— Murph
সূত্র

আপনি লিখেছেন যে ব্রাউজারগুলি এটি খুব খারাপ জিনিসগুলির মতো উপস্থাপন করে তবে অবশ্যই আপনি তা বিশ্বাস করেন না?

— কাপ্তজনকোল্ড

4

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

— Andrea

1

@ আন্ড্রেয়া: আমরা জানি যে ইন্টারনেটটি বাড়ত না। এটি আরও ধীরে ধীরে বেড়ে উঠত। তবে এটি সঠিক কোড কী এবং কী নয় তার একটি আরও দৃ basis় ভিত্তি ছিল। দ্রুত-তবে-মোড়ক কাজ করতে পারে তবে আমি অনেকটা ধীর-তবে-সঠিক পছন্দ করি। বিশেষত যেহেতু এটি আমরা পছন্দ করি না কেবল কয়েক বছর বা কয়েক বছরের বৃদ্ধির কথা বলব।

— নিকল বোলাস

3

@ আন্ড্রেয়া আমি বাজি ধরতাম যে এটি প্রায় দ্রুত বৃদ্ধি পেতে পারত - সমস্যাগুলি মোকাবেলায় সরঞ্জামগুলি সহজেই বিকশিত হত। যেখানে অনেক ক্ষেত্রেই সরঞ্জামগুলি দুর্বল মার্কআপের মূল কারণ ছিল। আসল বিষয়টি হ'ল লোকেরা কমপক্ষে প্রয়োজনীয় কাজ করার ঝোঁক রাখে - "ভালভাবে গঠন" করার পদক্ষেপটি তুলনামূলকভাবে ছোট এবং পরীক্ষা করা এবং প্রয়োগের পক্ষে যথেষ্ট সহজ এবং লোকেরা তা উল্লেখযোগ্য চাপ ছাড়াই সামঞ্জস্য করতে পারে

— মারফ

1

এটি ভয়াবহ নয় যে ব্রাউজারগুলি সংযুক্ত হয়। এটা ভয়ানক যে তারা সকলেই বিভিন্ন উপায়ে স্থান পাচ্ছে ।

— ড্যান রে

7

স্ক্রিপ্টিংয়ে: getElementByIDকেবল প্রথম ম্যাচটি ফিরবে। সিএসএসে: #idসেই আইডি সহ সমস্ত উপাদানকে প্রভাবিত করবে। ব্রাউজারে রেন্ডার কোনও প্রভাব ফেলবে না।

এটি ডাব্লু 3 সি স্ট্যান্ডার্ডের আচরণ। কোনও সম্ভাব্য নয়, এটি প্রকৃত সংজ্ঞাযুক্ত।

https://dom.spec.whatwg.org/#interface-nonelementparentnode

— বার্ট ক্যালিক্স্টো
সূত্র

7

এটি একটি সম্ভাব্য আচরণ। getElementByIdপুরোপুরি কোনও উপাদান, এমনকি একটি নাল বস্তুও ফিরিয়ে দিতে পারে। সিএসএসের প্রভাব কোনও উপাদান বা কোনও একটিতেও হতে পারে। অথবা ব্রাউজারটি ক্রাশ হতে পারে। মান আউট, আচরণ undefined

— RDS

2

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

— বার্ট ক্যালিক্সটো

1

এই উত্তরটি যদি কিছুটা ভাল হয় তবে এটি যদি আসলে উল্লেখ হিসাবে প্রমিতের প্রাসঙ্গিক অংশের (বা কমপক্ষে একটি বিভাগ নম্বর) অন্তর্ভুক্ত থাকে included

— yoniLavi

2

@YoniLavi আপডেট হয়েছে।

— বার্ট ক্যালিক্স্টো

2

ধন্যবাদ বার্ট আপনি একেবারে ঠিক বলেছেন :) স্ট্যান্ডার্ডটি বলেছে " নোডের বংশধরের মধ্যে প্রথম উপাদানটি আসে যার আইডি عنصرযুক্ত" "

— yoniLavi