সিএসএস বনাম জাভাস্ক্রিপ্ট: ট্রাস্ট বনাম নিয়ন্ত্রণ

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

আমার আলাপের নোটগুলি এখানে।

এক বিরক্তিকর লড়াই

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

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

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

জিয়ানা ব্লান্টিন সুন্দরভাবে বলেছেন:

এই দুটি গ্রুপ:
 "সিএসএস এত সহজ, এটি কোডিংও নয়"
 "সিএসএস এত কঠিন, আমাদের এটি জেএসের সাথে প্রতিস্থাপন করতে হবে!"
 একে অপরের সাথে কথা বলতে দয়া করে?

সিএসএসের অনেক ভুল ধারণা রয়েছে কারণ ডেভেলপাররা বুঝতে পারে না যে এটি প্রোগ্রামিং থেকে কীভাবে আলাদা। পরিবর্তে, আমরা এটি দিয়ে ঝাঁকুনি এবং কাছাকাছি জিনিস পরিবর্তন। কিছু ভঙ্গ করার পরে, আমরা সিদ্ধান্ত নিয়েছি যে এটি যথেষ্ট পরিমাণে ভাল নয় এবং আমাদের এটি প্রতিস্থাপন করা দরকার।

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

কার দোষ আছে এবং কার সহনশীল হওয়া উচিত?

সিএসএস, এইচটিএমএলের মতো অনেকটা ফল্ট সহনশীল। এটি বিভ্রান্তিকর হতে পারে। এর অর্থ হ'ল শেষ ব্যবহারকারীদের বিকাশকারীর ভুল থেকে ভোগ করা উচিত নয়।

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

একটি বাটন যা একটি পটভূমির রঙ এবং গ্রেডিয়েন্ট পুরানো পরিবেশে রঙ দেখায়। পারফরম্যান্স সমস্যার কারণে গ্রেডিয়েন্টগুলিকে সমর্থন করে না এমন পরিবেশে এটি এটি দেখায়। দ্রুততর, আরও হাই-ফাই এবং সহায়ক পরিবেশগুলি একটি গ্রেডিয়েন্ট প্রদর্শন করবে।

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

জাভাস্ক্রিপ্ট ফল্ট সহনকারী নয়। এটি বিপর্যয়কর হতে পারে। জাভাস্ক্রিপ্ট ব্যবহার করার সময় আপনি নিয়ন্ত্রণে অনেক বেশি। তবে আপনি আরও অনেক দায়ী।

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

অন্য কথায়:

  • সিএসএস - আপনি আপনার স্টাইলগুলি প্রয়োগ করেন এবং আপনি আশা করেন এটি কার্যকর হয়েছে।
  • জাভাস্ক্রিপ্ট - আপনি স্টাইলিং নিয়ন্ত্রণ করেন এবং এটি কার্যকর হয়েছে কিনা তা যাচাই করতে পারবেন এবং করতে পারেন

ব্রাউড ফ্রস্ট যেমন রেখেছিলেন, CSS এর অর্থ ওয়েবে "স্কুইশনেস" আলিঙ্গন করা। ওয়েব কোনও স্থির ক্যানভাস নয় যা আপনি পিক্সেল সেট করতে পারেন। এতে অনেকগুলি জিনিস আপনার নিয়ন্ত্রণের বাইরে:

  • আপনার ব্যবহারকারীদের ব্রাউজারগুলি
  • রেজোলিউশন, পিক্সেল ঘনত্ব এবং তাদের ডিভাইসের রঙ সেটিংস
  • তাদের সংযোগ নির্ভরযোগ্যতা এবং গতি
  • তাদের সংযোগ সীমাবদ্ধতা - সংস্থানসমূহ অবরুদ্ধ করা একটি জিনিস
  • তাদের হরফ আকার এবং জুম প্রয়োজন
  • আপনার পণ্যের জন্য তাদের মেশিনে সংস্থানসমূহের প্রাপ্যতা (সিপিইউ ইতিমধ্যে জ্বলছে?)
  • আপনার পণ্যটিতে টেক্সট সামগ্রী এবং চিত্রের আকারের পরিমাণ - সিএমএসের কেউ?

এটি উদ্বেগজনক হতে পারে এবং প্রায়শই আমরা আমাদের পণ্যগুলি যে পরিবেশে চালিত হয় তা নিয়ন্ত্রণ করতে চাই - যদি কেবল আমাদের তাত্পর্য বজায় থাকে তবে। এর অর্থ যদিও আমরা প্রচুর সম্ভাব্য ব্যবহারকারীকে আটকাই।

এই অজানা পরিবেশে আমাদের সিদ্ধান্ত নিতে হবে যে এর কার্য সম্পাদনের সমস্যাগুলি মোকাবেলায় কে কাজ গ্রহণ করবে:

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

সিএসএস এতে জঘন্য এবং ব্রাউজার মেকাররা ইন্টারফেসের পারফরম্যান্সটিকে টুইট করতে প্রচুর প্রচেষ্টা করে put

তাহলে আমরা কেন সিএসএসের কম মূল্যায়ন করব এবং জাভাস্ক্রিপ্টের সুবিধাগুলি অতিরিক্ত মূল্যবান করব? আমার ধারণা অনুমান করার জন্য একটি জিনিস ক্লাসিক - ইন্টারনেট এক্সপ্লোরার।

সিএসএস এবং এর প্রচণ্ড ইতিহাস

সিএসএসকে দ্রুত বড় হতে হয়েছিল এবং এটি নির্ভরযোগ্য একটি সরঞ্জাম হওয়ার দরকার ছিল এমন ব্রাউজারগুলির কাছ থেকে সমর্থন পেত না।

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

আইফোন বেরিয়ে আসার পরে সিএসএসের দিনটি লাইমলাইটে। "এইচটিএমএল 5 ভবিষ্যত" গল্পটির অতিরিক্ত অতিরিক্ত কার্যকারিতা প্রয়োজন। অ্যাপল সেখানে শটগুলি কল করার সাথে সাথে মানককরণের অনেক বেশি সময় নিয়েছিল "কেবল ওয়েবকিট"।

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

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

এটি আপনি নির্ভরযোগ্য বেস লাইন বা আপনি যে "ওয়েব নেটিভ" না হন তা বোঝার পক্ষে সহজ বলে পরিচিত নয়

ব্রাউজার সমর্থন নির্বিশেষে আমাদের সিএসএসের কাজ করা দরকার

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

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

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

সিএসএস আপনার জন্য কি করতে পারে

সিএসএস এখন করতে পারে এমন কিছু আশ্চর্যজনক বিষয় এখানে আপনার ব্যবহার করা বিবেচনা করা উচিত।

গণনা সিএসএসের মান

সিএসএসে সর্বদা অনুপস্থিত মনে হয়েছে এমন একটি জিনিস হ'ল মানগুলি গণনা করার একটি উপায়। ক্লাসিক উদাহরণটি একেবারে অবস্থানযুক্ত উপাদান যা 100% প্রশস্ত তবে প্যাডিংয়ের প্রয়োজন। পুরানো দিনগুলিতে আমাদের অন্য উপাদানকে বাসা বেঁধে তা করার দরকার ছিল এবং সেই সাথে প্যাডিং প্রয়োগ করা হয়েছিল। বেশ কিছু সময়ের জন্য আমরা এর জন্য সিএসএস ক্যালক () ব্যবহার করতে পারি এবং ক্যালকের একটি প্রস্থ (100% - 1 এম) প্রয়োগ করতে পারি।

গণনাগুলি ব্রাউজারগুলিতে খুব ভালভাবে সমর্থিত। এগুলি ব্যবহারের ক্ষেত্রে কোনও মানদণ্ড থাকা উচিত নয়।

মিডিয়া প্রশ্নের

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

উত্পন্ন সামগ্রী

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

এই গ্রাফিকটি একটি একক ডিআইভি উপাদান ব্যবহার করে তৈরি করা হয়েছে

অ্যানিমেশন এবং স্থানান্তর

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

ভিউপোর্ট ইউনিট

মিডিয়া ক্যোয়ারীগুলি যখন আপনি অভিজ্ঞতাকে বিস্তারিতভাবে সংজ্ঞায়িত করতে চান তখন তা বোধগম্য হয়। পরিবর্তে, আপনি উপলভ্য স্থান অনুযায়ী উপাদানগুলি আকার করতে ভিউপোর্ট ইউনিটগুলিও ব্যবহার করতে পারেন। ভিউপোর্ট প্রস্থ (vw) সম্পূর্ণ ভিউপোর্ট প্রস্থের শতাংশ percentage সুতরাং 480px প্রশস্ত পর্দায় 10vw 10% বা 48px is এটি% ইউনিট থেকে পৃথক, যা প্যারেন্ট উপাদানগুলির শতাংশ এবং ভিউপোর্ট নয়। নেস্টেড শতাংশ কম হবে, ভিডাব্লু হবে না। ভিউপোর্ট উচ্চতা (ভিএইচ) সম্পূর্ণ ভিউপোর্ট উচ্চতার এক শতাংশ। আপনি আমার এবং ভিএমএক্স ব্যবহার করে ওরিয়েন্টেশন থেকে নিজেকে স্বাধীন করতে পারেন। এগুলি হয় vw এবং vh ​​এর চেয়ে ছোট বা বৃহত্তর গ্রহণ করে। ভিউপোর্ট ইউনিটগুলির সমর্থনের একমাত্র নিগ্রেলটি হ'ল ডেট এজ ভিমন এবং ভিএমএক্স সমর্থন করে না।

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

flexbox

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

বিল্ড উইথ রিএ্যাক্টের ফ্লেক্সবক্স সম্পাদক এই কৌশলটি ব্যবহার করে উপাদানগুলি রাখার শক্তিটি প্রদর্শন করে

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

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

সিএসএস গ্রিড

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

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

আপনি যদি চ্যালেঞ্জগুলির সাথে আরও ভালভাবে শিখেন তবে আপনি সিএসএস গ্রিড গার্ডেন খেলে CSS গ্রিডকে উপলব্ধি করতে পারবেন।

অনলাইনে সিএসএস গ্রিড সম্পর্কে কিছু "অবশ্যই দেখতে হবে" আলোচনা রয়েছে। প্রথমটি হ'ল "সিএসএস গ্রিড লেআউট", আবার রাচেল অ্যান্ড্রু by

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

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

সিএসএস কাস্টম বৈশিষ্ট্য (ভেরিয়েবল)

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

কীভাবে জাভাস্ক্রিপ্ট সহ কাস্টম সিএসএস বৈশিষ্ট্যগুলি পড়তে এবং লিখতে হয় - (লে ভারো'র আলাপ থেকে অংশ)

আপনি যদি CSS কাস্টম প্রোপার্টিগুলির আশ্চর্যজনক শক্তি সম্পর্কে সমস্ত কিছু জানতে চান তবে এমন একটি কথা বলা উচিত যা আপনি মিস করবেন না। লিয়া ভারোর "সিএসএস ভেরিয়েবলস: ভার (- উপশিরোনাম)" হ'ল তথ্যের ভাণ্ডার।

সিএসএস বৈশিষ্ট্য প্রশ্নাবলী

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

সিএসএস এবং জাভাস্ক্রিপ্ট?

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

ক্রিশ্চিয়ানো রাস্টেলি যেমন তার "সিএসএসে শান্তি হোক" আলোচনায় ব্যাখ্যা করেছেন, "উদ্বেগের বিচ্ছেদ" এর লালিত বৈশিষ্ট্যটি মডিউল বিশ্বে প্রয়োগ হয় না।

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

সিএসএস এবং জাভাস্ক্রিপ্ট অ-উপাদান বিশ্বে এক সাথে কাজ করছে

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

সিএসএস এবং জেএস তৈরির শ্রেণিবিন্যাস এই দৃশ্যে অন্যটির সাথে কাজ করে:

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

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

সিএসএস ট্রিগার আপনাকে বিভিন্ন স্টাইল পরিবর্তনের প্রভাবের তথ্য দেয়

সংক্ষেপে

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

ব্যবহারকারীগণ তাত্ত্বিক বিশুদ্ধতার উপর নির্দিষ্টকরণকারকের তুলনায় প্রয়োগকারীদের উপর লেখককে ওভার করেন

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

অনুপ্রেরণামূলক এবং সক্রিয় CSS লোকদের অনুসরণ করতে

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

  • আইরি অ্যাডেরিনোকুন (@ireaderinokun) তার ব্লগ, বিটসফকো.ডে সিএসএস তথ্য বিটগুলিতে উপলব্ধি করতে অনেক সহজ এবং পয়েন্টটি লিখেছেন।
  • আনা টিউডার (@ অ্যান্টিউডর) এমন এক বিকাশকারী যিনি সিএসএসে হাস্যকর জটিল এবং সুন্দর অ্যানিমেশনগুলি তৈরি করেন। তার কোডপেন সবচেয়ে বেশি ঘন ঘন একটি এবং তিনি সিএসএস ইঞ্জিনগুলিতে যা করেন তা ব্রাউজার নির্মাতাদের তাদের পারফরম্যান্স পরীক্ষা করার জন্য একটি দুর্দান্ত সহায়তা
  • জেন সিমন্স (@ জেনসিমন্স) মজিলার হয়ে কাজ করা একটি সিএসএস লেআউট এবং ডিজাইন বিশেষজ্ঞ
  • আমার কাছে র‌্যাচেল অ্যান্ড্রু (@ ক্যারেল্যান্ড্রু) হলেন # 1 সিএসএস গ্রিড বিশেষজ্ঞ
  • ক্রিস কইয়ার (@ ক্রিসকোয়ার) আশ্চর্যজনক সিএসএস রিসোর্স সিএসএস ট্রিকস এবং ইন্টারেক্টিভ ডেভলপমেন্ট খেলার মাঠ কোডেপেনের প্রতিষ্ঠাতা
  • সারা ড্রসনার (@ সরাহ_ইদো) রক্ষণযোগ্য পণ্য তৈরিতে মনোনিবেশ করা একটি অ্যানিমেশন এবং ডিজাইন বিশেষজ্ঞ
  • জো এম গিলেনওয়াটার (@ জমিগি) উত্পাদনে রক্তপাত প্রবাহের সিএসএস ব্যবহার করে একটি নেতৃত্ব বিকাশকারী
  • ব্র্যাড ফ্রস্ট (@ ব্র্যাড_ফ্রস্ট) হ'ল পারমাণবিক ডিজাইনের লেখক, বড় প্রকল্পগুলিতে সিএসএস ব্যবহার ও পুনঃব্যবহার করার একটি স্কেলযোগ্য উপায়
  • রাচেল নাবারস (@ ক্রেল্নাবর্স) একটি কমিক শিল্পী এবং অ্যানিমেশন বিশেষজ্ঞ যা ওয়েব অ্যানিমেশন এবং বিভিন্ন প্রযুক্তির গুণাবলী সম্পর্কে লিখেছেন
  • Aনা ক্রভেটস (@una) হলেন এমন বিকাশকারী যা CSS এবং এর নতুন বৈশিষ্ট্যগুলিতে বিশেষীকরণ করে। তিনিও পডকাস্টার এবং সিএসএস এবং অন্যান্য ভিজ্যুয়াল প্রযুক্তির নাড়িতে খুব আঙুল রয়েছে
  • লিয়া ভারো (@ লেভারো) হলেন দুর্দান্ত সিএসএস সিক্রেটস বইয়ের লেখক, এমআইটির গবেষক এবং ডাব্লু 3 সি এর সিএসএস ওয়ার্কিং গ্রুপের আমন্ত্রিত বিশেষজ্ঞ। তিনি তার গবেষণায় নিখুঁত এবং অল্প সময়ে তার প্রচুর দুর্দান্ত তথ্য সরবরাহ করতে নির্মম।
  • সারা স্যুইডান (@ সরসৌইইদন) এমন এক বিকাশকারী যিনি প্রতিক্রিয়াশীল ডিজাইন এবং নতুন প্রযুক্তি ব্যবহারের ব্যবহারিক পদ্ধতির বিশেষজ্ঞ।

আমি প্রতিদিন এই লোকদের দ্বারা (অন্যদের মধ্যে) দ্বারা অনুপ্রাণিত হতে থাকি এবং আশা করি আপনিও একই অভিজ্ঞতা পেতে শুরু করবেন