হাইপারলিংক চিত্রগুলির চারপাশের রূপরেখা আমি কীভাবে সরিয়ে ফেলতে পারি?

Question 1

যখন আমরা সিএসএস ব্যবহার করে পাঠ্য প্রতিস্থাপন ব্যবহার করি এবং একটি নেতিবাচক টেস্ট-ইনডেন্ট দেয় text-indent:-9999px। তারপরে যখন আমরা সেই লিঙ্কটিতে ক্লিক করি তবে নীচের নমুনা চিত্রের মতো বিন্দুযুক্ত রেখাটি উপস্থিত হয়। এর সমাধান কী?

Question 2

অ্যাঙ্কর ট্যাগের জন্য রূপরেখা সরান

a {outline : none;}

চিত্রের লিঙ্ক থেকে রূপরেখা সরান

a img {outline : none;}

চিত্রের লিঙ্ক থেকে সীমানা সরান

img {border : 0;}

Question 3

আপনি অ্যাঙ্কর উপাদানটিতে সিএসএস বৈশিষ্ট্য "রূপরেখা" এবং "কিছুই নয়" এর মান ব্যবহার করতে পারেন।

a {
outline: none;
}

আশা করি এইটি কাজ করবে.

Question 4

ইন্টারনেট এক্সপ্লোরার 9 এর জন্য:

a:active, a:focus { 
 outline: none; 
 ie-dummy: expression(this.hideFocus=true);
}

সূত্র: http : //social.msdn.mic Microsoft.com/ Forums / en-HK / ieextensionde વિકાસment / thread / 1023adfd-bd73-47ac-ba9c-2bad19ac583a

Question 5

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

(তাদের স্থানে রাখলে এমন শক্তি ব্যবহারকারীদের সহায়তা করে যা তাদের মাউস ব্যবহার করতে পছন্দ করে না)

Question 6

ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার (আইই) তে একই সীমানা প্রভাব রয়েছে , আপনি কোনও লিঙ্কে ক্লিক করলে এটি দৃশ্যমান হয়।

এই কোডটি ঠিক IE স্থির করবে:

a:active { outline: none; }.

এবং এটি ফায়ারফক্স এবং আইই উভয়ই ঠিক করবে :

:active, :focus { outline: none; -moz-outline-style: none; }

আপনি যদি আপনার সাইট থেকে লিংক সীমানা মুছে ফেলতে চান তবে সর্বশেষ কোডটি আপনার স্টাইলশিটে যুক্ত করা উচিত।

Question 7

আপনার স্টাইল শীটে এই কোডটি অন্তর্ভুক্ত করুন

img {border : 0;}

a img {outline : none;}

Question 8

আমি আশা করি এটি আপনার কারও পক্ষে কার্যকর, এটি লিঙ্কগুলি, চিত্রগুলি এবং ফ্ল্যাশ এবং এমএসআইই 9 থেকে রূপরেখা সরাতে ব্যবহার করা যেতে পারে:

    a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
    }

নীচের কোডটি চিত্রের সীমানাকে আড়াল করতে সক্ষম:

    img {
    border: 0;
    }

আপনি যদি ফায়ারফক্স ৩.6.৮ সমর্থন করতে চান তবে ফায়ারফক্স ৪ নয় ... একটি ইনপুট টাইপ = ছবিতে ক্লিক করা একটি ডটড আউটলাইনও তৈরি করতে পারে, ফায়ারফক্সের পুরানো সংস্করণগুলিতে এটি সরাতে নিম্নলিখিত কৌশলটি কাজ করবে:

   input::-moz-focus-inner { 
   border: 0; 
   }

আপনি যদি এই পৃষ্ঠাগুলির মধ্যে এবং আপনার পৃষ্ঠাগুলির মধ্যে অন্তর্ভুক্ত না করেন তবে আইই 9 কিছু ক্ষেত্রে লিঙ্কগুলির আশেপাশে ডটেড আউটলাইনটি সরাতে দেয় না:

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Question 9

এটি গুগল ক্রোমে কাজ করা সর্বশেষতম

:link:focus, :visited:focus {outline: none;}

Question 10

-moz-user-focus: ignore; গেকো-ভিত্তিক ব্রাউজারগুলিতে (আপনার প্রয়োজন হতে পারে! এটি কীভাবে প্রয়োগ করা হয় তার উপর নির্ভর করে)

Question 11

এইচটিএমএল 4.01 এর জন্য এটির মতো ব্যবহার করুন

<img src="image.gif" border="0">

Question 12

আপনি overflow:hiddenটেক্সট ইনডেন্টের সাহায্যে সম্পত্তিটিতে রাখতে পারেন এবং পৃষ্ঠাটির বাইরে ছড়িয়ে থাকা ডটেড লাইনটি অদৃশ্য হয়ে যাবে।

আমি একসাথে সমস্ত রূপরেখা সরানোর বিষয়ে বেশ কয়েকটি পোস্ট দেখেছি। আপনি যখন সাইটের অ্যাক্সেসযোগ্যতা হ্রাস করতে পারেন এটি করার সময় সাবধান হন।

a:active { outline: none; }

আমি ব্যক্তিগতভাবে এই বৈশিষ্ট্যটি কেবলমাত্র ব্যবহার করব, যেমন যদি সেই :hoverবৈশিষ্ট্যের একই সিএসএস বৈশিষ্ট্য থাকে তবে এটি নেভিগেশনের জন্য কীবোর্ড ব্যবহার করছে এমন লোকেদের দেখানোর বাহ্যরেখাটি প্রতিরোধ করবে।

আশা করি এটি আপনার সমস্যার সমাধান করে।

Question 13

ডটেড আউটলাইন href লিঙ্কটি সরানোর জন্য আপনি নিজের CSS ফাইলটিতে লিখতে পারেন:

a {
   outline: 0;
}

Question 14

আমি বাজি ধরব বেশিরভাগ ব্যবহারকারী এমন কোনও ব্যবহারকারীর নয় যা নেভিগেশন নিয়ন্ত্রণ হিসাবে কীবোর্ডটি ব্যবহার করে। কীবোর্ড নেভিগেশন ব্যবহার করতে পছন্দ করে এমন একটি ছোট গ্রুপের জন্য আপনার বেশিরভাগ ব্যবহারকারীকে বিরক্ত করা কি গ্রহণযোগ্য? সংক্ষিপ্ত উত্তর - আপনার ব্যবহারকারীরা কে নির্ভর করে।

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

আপনি যদি সত্যই আপনি কোথায় আছেন এবং আপনি কীবোর্ড ব্যবহারকারী জানতে চান তবে আপনি সর্বদা সাইটের মাধ্যমে কী হিসাবে স্থিতি দণ্ডটি দেখতে পারেন।

Question 15

এটি আমার পক্ষে নিখুঁতভাবে কাজ করে

a img {border:none;}

Question 16

যে কোনও চিত্রের একটি লিঙ্ক রয়েছে তার চিত্রের চারপাশে একটি সীমানা থাকবে এটি নির্দেশ করতে সহায়তা করতে এটি পুরানো ব্রাউজারগুলির সাথে একটি লিঙ্ক। আপনার আইএমজি এইচটিএমএল ট্যাগে সীমানা = "0" যুক্ত করা সেই চিত্রটিকে চিত্রের চারপাশে কোনও সীমানা রাখতে বাধা দেবে।

যাইহোক, প্রতিটি চিত্রে সীমানা = "0" যুক্ত করা কেবল সময় ব্যয় করে না কেবল ফাইলের আকার এবং ডাউনলোডের সময় বাড়িয়ে তুলবে। আপনি যদি কোনও চিত্রের সীমানা না চান তবে একটি সিএসএস নিয়ম বা সিএসএস ফাইল তৈরি করুন যার নীচে কোড রয়েছে।

img {সীমানা-শৈলী: কিছুই নয়; }

Question 17

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

আমি আলাদা স্টাইলশিট রাখার পরামর্শ দেব (উদাহরণস্বরূপ, ' লাজিস্ট স্টাইলশীট ' প্লাগইন ব্যবহার করুন ) এবং বিদ্যমান প্লাগইন (বা থিম) -বলিত স্টাইলকে ওভাররাইড করতে এর মধ্যে নিম্নলিখিত সিএসএস লিখুন:

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

নির্দিষ্ট নিয়মে ' ! গুরুত্বপূর্ণ ' যুক্ত করা বিধিটি অন্য কোথাও (যদিও এটি কোনও প্লাগইন, থিম ইত্যাদিতেই থাকুক না কেন) তৈরি করা এটিকে অগ্রাধিকার দেবে।

এটি বিকাশের সময় সাশ্রয় করতে সহায়তা করে। অবশ্যই, আপনি মূল উত্সটির জন্য খনন করতে পারেন, তবে আপনি যখন অনেক প্রকল্পে কাজ করছেন, বা আপডেটগুলি সম্পাদন করার প্রয়োজন রয়েছে (যেখানে আপনার পরিবর্তনগুলি ওভাররাইড করা যেতে পারে [ প্রস্তাবিত নয়! ]), বা নতুন প্লাগইন বা থিম যুক্ত করা যায়, এটি সেরা সময় বাঁচানোর আশ্রয়।

আশা করি এটি ... শান্তি!

Question 18

উপরের সমাধানটি যদি কারও পক্ষে কাজ করে না। এটিও চেষ্টা করে দেখুন

a {
 box-shadow: none;
}

Question 19

হ্যাঁ আমরা ব্যবহার করতে পারি। সিএসএস রিসেট হিসাবে a {outline:none}এবং

a:focus, a:active {outline:none} সিএসএস রিসেট করার সেরা অনুশীলনের জন্য, সেরা সমাধানটি সাধারণ ব্যবহার করা হচ্ছে :focus{outline:none}যদি আপনার এখনও সেরা বিকল্প থাকে তবে দয়া করে ভাগ করুন