{"id":11167,"date":"2022-05-13T12:17:00","date_gmt":"2022-05-13T10:17:00","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=11167"},"modified":"2024-09-20T15:19:09","modified_gmt":"2024-09-20T13:19:09","slug":"html-css-vs-javascript","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/html-css-vs-javascript\/","title":{"rendered":"When HTML & CSS Replace Javascript: A Simple Element Cheatsheet"},"content":{"rendered":"\n

There’s a tendency to think that JavaScript is clearly superior to HTML & CSS<\/a> in every aspect. However, as I will show you in this short, code-ridden article, that’s not the case for all elements. <\/p>\n\n\n\n

Why Bother With HTML & CSS?<\/h2>\n\n\n\n

Too much Javascript can slow down your website. <\/strong><\/p>\n\n\n\n

Generally speaking, as a developer in an experienced React company<\/a>, I’m a firm believer in HMTL and CSS. I believe that whenever you don’t need to use JavaScript – you shouldn’t. There are plenty of cases where instead of JS you can use pure HTML & CSS achieving the same result with lighter code. <\/p>\n\n\n\n

In this article, I’m going to show you a couple of elements you can create without JavaScript. <\/p>\n\n\n\n

Feel free to copy-paste the code to your editor! <\/p>\n\n\n\n

1: Accordion<\/h2>\n\n\n\n

There are quite a few ways we can build accordions without writing a single line of JS. Here I’m going to show you two quick and pain-free ways you can get it done with just HTML & CSS.<\/p>\n\n\n\n

1. The first one is based on natively embedded HTML5 tags:<\/p>\n\n\n\n

    \n
  1. <details><\/li>\n\n\n\n
  2. <summary><\/li>\n<\/ol>\n\n\n\n

    Disclaimer: Unfortunately, these tags are not supported by the Internet Explorer browser.<\/p>\n\n\n\n

    <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    <title>Static Template<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n  <\/head>\n  <body>\n    <details class=\"accordion\">\n      <summary class=\"accordion__head\">\n        <h3 class=\"accordion__title\">\n          How will we conduct IEP and 504 meetings?\n        <\/h3>\n      <\/summary>\n      <div class=\"accordion__content\">\n        <p>All meetings will be held remotely.<\/p>\n      <\/div>\n    <\/details>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    There are two widely-occurring issues with default summary styling. But there are also easy fixes that take care of the problem.<\/p>\n\n\n\n
      \n
    1. The first issue lies with the cursor. By default, the hover pointer in the summary tag is set to a text cursor<\/strong> which may be confusing to the user. In order to fix this, we’ve simply added a cursor: pointer<\/strong> to the summary tag.<\/li>\n\n\n\n
    2. The second is that the headings are set to {display: block;} by default. <\/strong>If we want to use headings as text tags in the summary tag, we need to set {display: inline;}<\/strong> to all elements inside the summary tag.<\/li>\n<\/ol>\n\n\n\n
      You can use the above code in a Q&A section, for example. This is what it’s going to look like:<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      2. The second way to create an accordion without using JS is based on input, either radio or checkbox<\/strong>. This method is a little bit more complex but works with all browsers. <\/p>\n\n\n\n
      Here is all code that you need to make it work:<\/p>\n\n\n\n
      <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    <title>Static Template<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n  <\/head>\n  <body>\n    <div class=\"wrapper\">\n      <div class=\"accordion\">\n        <input\n          class=\"accordion__input\"\n          type=\"radio\"\n          name=\"question\"\n          id=\"question1\"\n        \/>\n        <label class=\"accordion__title\" for=\"question1\"\n          >Why React is better than Angular?<\/label\n        >\n        <p class=\"accordion__content\">:)<\/p>\n      <\/div>\n      <div class=\"accordion\">\n        <input\n          class=\"accordion__input\"\n          type=\"radio\"\n          name=\"question\"\n          id=\"question2\"\n        \/>\n        <label class=\"accordion__title\" for=\"question2\"\n          >Why React is better than Angular?<\/label\n        >\n        <p class=\"accordion__content\">:)<\/p>\n      <\/div>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
      As mentioned before, this method relies on the use of inputs that give us control over the opening and closing of accordions.<\/p>\n\n\n\n
      Get your code clean<\/p>
      SCHEDULE A FREE CALL WITH OUR EXPERT. <\/a><\/div><\/div><\/div>\n\n\n\n
      2. Modal and Popup<\/h2>\n\n\n\n
      Other cool stuff we can create with just HTML and CSS are modals and popups. It is possible to do this thanks to the pseudo-class :target<\/strong>, which joins the URL hash with the id of an element <\/strong>(e.g. href=”#popup” and id=”popup”). <\/p>\n\n\n\n
      Keep in mind that when dealing with this modal and popup, the biggest issue is that when you open a modal\/popup, the website will jump to a given element.<\/p>\n\n\n\n
      <\/p>\n\n\n\n
        \n
      1. Take a look at this modal first. It’s turned on and off by pressing the button.<\/li>\n<\/ol>\n\n\n\n
        <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    <title>Static Template<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n  <\/head>\n  <body>\n    <div class=\"wrapper\">\n      <a class=\"button\" href=\"#modal\">Open modal<\/a>\n      <div class=\"modal\" id=\"modal\">\n        <div class=\"modal__inner\">\n          <a class=\"modal__close\" href=\"#\">Close modal<\/a>\n          <div class=\"modal__content\">\n            <p>Content goes here<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
          \n
        1. The next thing you can use the :target for, is the popup window, which can be disabled by clicking outside the content of our popup window.<\/li>\n<\/ol>\n\n\n\n
          <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    <title>Static Template<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n  <\/head>\n  <body>\n    <div class=\"wrapper\">\n      <a class=\"button\" href=\"#popup\">Open modal<\/a>\n      <div class=\"popup\" id=\"popup\">\n        <a href=\"#\" class=\"popup__close\"><\/a>\n        <div class=\"popup__inner\">\n          <div class=\"popup__content\">\n            <p>Content goes here<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n    \n    
          \n        
          \n            \n            \n            \n            \n            <\/svg>\n        <\/div>\n        
          Quick poll<\/p>\n        
          What do you prefer to code with?<\/p>\n\n        
          \n            \n            \n            \n            
          \n                 \n                                            
          \n                            \n                        <\/div>\n                                                         \n                                            
          \n                            \n                        <\/div>\n                                                         \n                                            
          \n                            \n                        <\/div>\n                                                                    <\/div>\n            
          133<\/span> votes<\/div>\n        <\/form>\n    <\/div>\n\n\n\n\n
          3. Tooltip<\/h2>\n\n\n\n
          Next is the tooltip. It works a bit like the modal and popup examples above. However, the tooltip shows up on the hover. To show the content that we put into aria-label, we pass it in the CSS attribute content with the value content: attr(aria-label).<\/p>\n\n\n\n
          <!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\n    <title>Static Template<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\" \/>\n  <\/head>\n  <body>\n    <div class=\"wrapper\">\n      <p>\n        This is how a\n        <a\n          href=\"#\"\n          class=\"tooltip\"\n          aria-label=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"\n          >tooltip<\/a\n        >\n        works without JS\n      <\/p>\n    <\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n