اگر به تدوین علاقه‌مندی، آموزش ادوبی پریمیر بهترین نقطه‌ی شروعه!

با تبلیغات آنلاین  کسب و کار خودتون رو گسترش بدید

نحوه سبک کردن html با matcha.css

Matcha ، یک چای سبز معروف ، به دلیل مزایای کاهش استرس شناخته شده است. من ادعا نمی کنم که این چای لزوماً الهام بخش نام کتابخانه ای است که با شما در مورد آن بحث خواهم کرد ، اما نامگذاری مشابه کمی تصادفی است زیرا این کتابخانه همچنین توسعه دهندگان ما را از برخی استرس های غیر ضروری نجات می دهد.

بنابراین بگذارید چراغی در مورد مزایا ، مفاهیم ، و مؤلفه های cant.ca.css ایجاد کند.

اگر می خواهید عناصر HTML از این کار بروند:

به این:

بدون نیاز به نوشتن یک خط CSS ، سپس به اطراف بچسبید.

یک مرور مختصر از matcha.css

matcha.css یک کتابخانه خالص CSS است که برای سبک کردن عناصر HTML به طور مشابه با یک برگه مرورگر پیش فرض طراحی شده است. این بدان معنی است که یک ظاهر طراحی شده اساسی را برای عناصر اعمال می کند ، بنابراین به جای اینکه فقط این کار را داشته باشید:

شما می توانید با پیوند دادن برگه شیوه ای Matcha و داشتن این ، استرس یک ظاهر طراحی شده را به عنوان یک دکمه بسیار آسان ذخیره کنید:

(به ذکر اثر شناور جایزه):

matcha.css آزادی شما را برای سبک کردن منحصر به فرد از بین نمی برد. به عنوان مثال ، من به سادگی می توانم این خط کد را اضافه کنم:

 دکمه {
    Border-radius: 0 ؛
    پس زمینه رنگ: #FFF ؛
}

و این را دریافت کنید:

اکنون که سادگی را که به ارمغان می آورد ، دیدیم ، بیایید دقیقاً چه موقع باید از این کتابخانه صرفه جویی در زمان استفاده کنیم.

از موارد استفاده کنید

به گفته سازندگان کتابخانه ، موارد زیر برای استفاده از matcha.css :

• نمونه سازی سریع
• صفحات HTML استاتیک
• اسناد تولید شده توسط Markdown

بیایید برای کسب اطلاعات بیشتر در مورد سایر matcha.css مزایای:

مزایای فنی

ما می دانیم matcha.css باعث صرفه جویی در وقت و تلاش می شود ، اما دقیقاً چگونه این کار را انجام می دهد؟

در اینجا لیستی از نحوه عملکرد کتابخانه آورده شده است:

• matcha.css به توسعه دهندگان کمک می کند تا گردش کار خود را بدون نیاز به شیرجه زدن به پیچیدگی های CSS ساده تر کنند
• matcha.css از طیف کاملی از عناصر HTML پشتیبانی بزرگی دارد ، بنابراین فرصتی وجود دارد که هر عنصری که در پروژه خود استفاده می کنید در حال حاضر طراحی شده است
• این کتابخانه هیچ مرحله ساخت ندارد
• هیچ وابستگی ندارد
• به JavaScript احتیاج ندارد
• نیازی به پیکربندی یا اصلاح مجدد اضافی ندارد
• این سبک وزن است و فقط 8.8 کیلوبایت اندازه پروژه شما را به خود اختصاص می دهد. برنامه هایی برای کاهش این اندازه حتی بیشتر وجود دارد

ویژگی های اصلی matcha.css

علاوه بر matcha.css که منبع باز تحت مجوز MIT است ، چندین ویژگی اصلی دیگر دارد.

پاسخگویی

عناصر

بدون توجه به اندازه صفحه نمایش ، پاسخگو هستند.

agnostic

این کتابخانه با هر نوع سند به خوبی کار می کند و عناصر HTML بیشتری را نسبت به کتابخانه های مشابه پوشش می دهد. با استفاده از عناصر شبه CSS از ساختار موجود عناصر HTML شما باقی می ماند.

برگشت پذیر

شما می توانید استفاده از آن را فقط با اضافه کردن یک برچسب ساده شروع کنید ، و به راحتی می توانید در هر زمان بدون نیاز به تغییر یا تمیز کردن سند خود ، از بین برود.

معنایی

عناصر کتابخانه بر اساس نحوه ساختار آنها ، رفتارهای مفیدی مانند نمایش زیرمجموعه را ارائه می دهد وقتی عناصر مورد نیاز خود را اضافه می کنند یا یک نشانگر فیلد مورد نیاز (*) را اضافه می کنند وقتی به یک .

مرتبط است

قابل تنظیم

matcha.css به توسعه دهندگان این آزادی را می دهد تا فقط ویژگی های مورد نیاز خود را بسازند یا انتخاب کنند ، و پرونده نهایی را کوچکتر و متناسب با پروژه شما می کند. برای انجام این کار ، به صفحه صفحه بسازید ، با لیست طولانی از یک یک ظاهر طراحی شده ، ویژگی ها ، سفارشی سازی و متفرقه بازی کنید ، و پس از انجام ، پیش نمایش خود را بدست آورید و matcha.csss /code /code> tyleset.

 
 دکمه دکمه>
 مشترک شدن دکمه>
 نامشخصی دکمه>
 برای اعضا دکمه>

 
 با ما تماس بگیرید 

 
  
    

      
  logrocket  
      
  logrocket  
      
  logrocket  
    
  منو>

 

  
    

      
 وبلاگ
        
          
 dev 
          
 پادکست 
          
 طراحی UX 
          
 راه حل ها
            
              
 مشکلات گزارش شده توسط کاربر را حل کنید 
              
 یافتن سریعتر 
            منو>
          
          
 مدیریت محصول 
        منو>
      
      
  ویژگی ها  
      
  راه حل  
    
  منو>

 

   مقدمه انتقال مسیر زاویه ای خلاصه>
  

    در حالی که ممکن است انیمیشن ها همیشه هیجان انگیزترین جنبه برای توسعه دهندگان ما نباشند ، برای نگه داشتن کاربران ضروری هستند. 
    در حقیقت ، هدف اصلی انیمیشن ها تعامل و تعامل است. یک انیمیشن سبک می تواند یک کاربر را مجبور کند سایر مؤلفه ها را امتحان کند 
    از وب سایت شما به امید بیشتر این جادو. انیمیشن ها یک تجربه استاتیک را به یک سفر پویا تبدیل می کنند و کاربر را تبدیل می کنند 
    لذت بخش تر و تحمل بیشتری را تجربه کنید. در حالی که انیمیشن ها ممکن است همیشه هیجان انگیز ترین جنبه برای توسعه دهندگان ما نباشند ، 
    آنها برای مشغول نگه داشتن کاربران ضروری هستند.
  
جزئیات>

 

  
    
 هشدار 
  

  
 آیا مطمئن هستید که می خواهید این عمل را انجام دهید؟ این عمل نمی تواند خنثی شود. 

  

 برای چرخش یک رابط کار سریع انجام شده ، در صورت تمایل کد زیر را کپی کنید: 
 
  

    

      
        
 کار خانه 
      

      

        
         اضافه کردن دکمه>
      

      
 
    
  

  


 در کد فوق ،  کلاس های Matcha.css  کلاس ها مانند  Flash Default  ،  italic  و  فعال  برای چیدمان های اساسی و یک ظاهر طراحی شده استفاده شد ، و این همان چیزی است که به نظر می رسد: 
 
Let’s add the to-do functionality and make it work:
document.addEventListener("DOMContentLoaded", function () {
  const todoInput = document.getElementById("todo-input");
  const addBtn = document.getElementById("add-btn");
  const todoList = document.getElementById("todo-list");

  addBtn.addEventListener("click", function () {
    const taskText = todoInput.value.trim();
    if (taskText) {
      addTask(taskText);
      todoInput.value = "";
    }
  }) ؛

  function addTask(taskText) {
    const li = document.CreateElement ("li") ؛

    const taskSpan = document.createElement("span");
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);

    const completeBtn = document.createElement("button");
    completeBtn.textContent = "✔";
    completeBtn.classList.add("success");
    li.appendChild(completeBtn);

    const editBtn = document.createElement("button");
    editBtn.textContent = "✎";
    editBtn.classList.add("edit-btn");
    li.appendChild(editBtn);

    const deleteBtn = document.createElement("button");
    deleteBtn.type = "reset";
    deleteBtn.textContent = "✘";
    deleteBtn.classList.add("delete-btn");
    li.appendChild(deleteBtn);

    completeBtn.addEventListener("click", function () {
      li.classList.toggle("strikethrough");
    }) ؛

    editBtn.addEventListener("click", function () {
      const newTaskText = prompt("Edit your task:", taskText);
      if (newTaskText) {
        taskSpan.textContent = newTaskText.trim();
      }
    }) ؛

    deleteBtn.addEventListener("click", function () {
      li.remove();
    }) ؛

    todoList.appendChild(li);
  }
}) ؛

The code above is programmed to enable users to create, edit, complete, and delete tasks. When the add button is clicked, the addTask function creates the complete, edit, and delete buttons. This is where Matcha plays a unique role.
First off, adding matcha.css in the HTML file enables every future HTML element to be automatically styled by default. Later on, when we create the edit or delete button during a task, matcha.css will automatically implement the styling. If anything, we may just need to add its matcha.css type or class.
In normal circumstances, we create a class for these buttons. Let’s say we want line-through text decoration on any task we have completed. We would have to create the class in JavaScript and style it in CSS:
completeBtn.addEventListener("click", function () {
  li.classList.toggle("strikethrough");
}) ؛

With matcha.css, we do not need to go through the whole styling stress, as it gives us a strikethrough class for such an effect, as seen above.
We also used match.css for more styling as seen in the code below:
const completeBtn = document.createElement("button");
completeBtn.textContent = "✔";
completeBtn.classList.add("success");
li.appendChild(completeBtn);

The success class added above gives the button a green background whenever we hover over it. The delete button wasn’t left alone in the styles:
const deleteBtn = document.createElement("button");
deleteBtn.type = "reset";
deleteBtn.textContent = "✘";
deleteBtn.classList.add("delete-btn");
li.appendChild(deleteBtn);

In the delete button, we added a matcha.css button type called reset. All it does is style the button border red, and when we hover over it, it turns red too. At the end of it all, this is what our to-do application looks like:

The ✔ button toggles a strikethrough effect on the task, indicating it has been completed. The ✎ button prompts the user to edit the task’s text, while the ✘ button removes the task entirely from the list.
We have been able to see matcha.css in a real-world project, and despite the application being small, it is very effective. But how does it perform when going head-to-head with a similar library?
How to combine matcha.css with other CSS libraries
If you want to know if combining matcha.css with other libraries is possible, the straight answer is yes, but there are conflicts. While matcha.css is mostly intended to be used along with semantic styling, the Matcha team advises that it is not a full-utility CSS framework and asks users to opt or consider using (or switching to) a utility-first CSS framework if you find the provided utility classes lacking or too limited.
When we attach Tailwind CSS’s script to an HTML file with Matcha originally in use, it overwrites some designs, like our projects after attaching this file:


 به نظر می رسد مانند این: 

The right way to be in the mix with these CSS frameworks is to use them for what they are for — matcha.css is not a CSS out-of-the-box utility class framework. Rather, it applies custom styles to individual elements, and this is what it should be used for.
Compare that to Tailwind which is a CSS out-of-the-box utility class framework, and therefore it should be used to personalize your design. For example, you may not be a fan of Matcha’s input styling, but then you prefer with the button styles. In this case, Tailwind should be used for the inputs and matcha.css should be use for the buttons.
Here’s an example where Tailwind ruins some matcha.css styles:

With a few Tailwind edits like this:
document.addEventListener("DOMContentLoaded", function () {
  const todoInput = document.getElementById("todo-input");
  const addBtn = document.getElementById("add-btn");
  const todoList = document.getElementById("todo-list");

  addBtn.addEventListener("click", function () {
    const taskText = todoInput.value.trim();
    if (taskText) {
      addTask(taskText);
      todoInput.value = "";
    }
  }) ؛

  function addTask(taskText) {
    const li = document.CreateElement ("li") ؛

    // Add light green border and padding to list items
    li.classList.add(
      "border",
      "border-green-500",
      "p-4",
      "rounded-md",
      "mb-3",
      "shadow-sm",
      "mt-5"
    ) ؛

    const taskSpan = document.createElement("span");
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);

    // Button container with flex and spacing
    const buttonContainer = document.createElement("div");
    buttonContainer.classList.add("flex", "space-x-3", "mt-2");

    // Complete button with softer contrast
    const completeBtn = document.createElement("button");
    completeBtn.textContent = "✔";
    completeBtn.classList.add(
      "bg-green-400",
      "text-white",
      "px-2",
      "py-1",
      "rounded-md",
      "hover:bg-green-500",
      "focus:outline-none",
      "shadow-sm"
    ) ؛
    buttonContainer.appendChild(completeBtn);

    // Edit button with less aggressive yellow
    const editBtn = document.createElement("button");
    editBtn.textContent = "✎";
    editBtn.classList.add(
      "bg-yellow-300",
      "text-gray-800",
      "px-2",
      "py-1",
      "rounded-md",
      "hover:bg-yellow-400",
      "focus:outline-none",
      "shadow-sm"
    ) ؛
    buttonContainer.appendChild(editBtn);

    // Delete button with a softer red
    const deleteBtn = document.createElement("button");
    deleteBtn.type = "reset";
    deleteBtn.textContent = "✘";
    deleteBtn.classList.add(
      "bg-red-200",
      "text-white",
      "px-2",
      "py-1",
      "rounded-md",
      "hover:bg-red-500",
      "focus:outline-none",
      "shadow-sm"
    ) ؛
    buttonContainer.appendChild(deleteBtn);

    li.appendChild(buttonContainer);

    completeBtn.addEventListener("click", function () {
      li.classList.toggle("strikethrough");
    }) ؛

    editBtn.addEventListener("click", function () {
      const newTaskText = prompt("Edit your task:", taskText);
      if (newTaskText) {
        taskSpan.textContent = newTaskText.trim();
      }
    }) ؛

    deleteBtn.addEventListener("click", function () {
      li.remove();
    }) ؛

    todoList.appendChild(li);
  }
}) ؛

Then we can have this:
 
Now we have seen how we can easily use matcha.css with Tailwind. Let’s look at how it performs against its peers.
Matcha CSS vs. Pico CSS
We can see how matcha.css performs against Pico CSS:



Comparison
Matcha CSS
Pico CSS





Semantic
✔
✔


Customizable
✔
✔


Open source
✔
✔


Theming
✘ (Not inbuilt)
✔


Classes for styling
✔
✔


Responsiveness
✔
✔


Available on CDN and NPM
✔
✔


License
MIT License
MIT License


Utility CSS framework
Less support, as its original intent goes against it.
✔


جدول>

نتیجه گیری 
matcha.css holds its ground when it comes to styling HTML and is a solid option even after evaluation.
We’ve explored its use cases and how it can effectively fit into our project. It’s also important to note that matcha.css isn’t trying to compete as a full-utility CSS framework. If its built-in utilities feel too limited for your needs, the creators recommend considering a utility-first CSS framework as an alternative.


 آیا جلوی شما پردازنده کاربران خود را در دست دارد؟ 
 از آنجا که جبهه های وب به طور فزاینده ای پیچیده می شوند ، ویژگی های سبز منابع مورد نیاز بیشتر و بیشتر از مرورگر است. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
  

    


     logrocket  به شما اجازه می دهد جلسات کاربر را دوباره پخش کنید ، با نشان دادن دقیقاً آنچه کاربران تجربه کرده اند ، حدس و گمان اتفاق می افتد. این پرونده های کنسول ، خطاها ، درخواست های شبکه و ضبط های DOM کامل پیکسل را ضبط می کند-سازگار با همه چارچوب ها.
  
 جلسات ساعتهای گالیله Logrocket برای شما ، بلافاصله شناسایی و توضیح مبارزات کاربر با نظارت خودکار از کل تجربه محصول شما. 
 نحوه اشکال زدایی برنامه های وب و تلفن همراه را مدرن کنید- شروع به نظارت به صورت رایگان . 




حتما بخوانید : 9 روند مدیریت پروژه دیگر نمی توانید نادیده بگیرید
خرید افزونه جت انجین از آرتمیس;شروع حرفه برای فروشگاه آنلاینت
برای وزرش کردن به سایت ورزش مراجعه کنید
لذت شنیدن بهترین آهنگ های کلاسیک جهان در سایت موزیک استارت