{"id":141,"date":"2022-09-18T12:34:40","date_gmt":"2022-09-18T12:34:40","guid":{"rendered":"https:\/\/mustafauzun.co\/blog\/?p=141"},"modified":"2022-09-18T15:13:28","modified_gmt":"2022-09-18T15:13:28","slug":"javascript-css-in-browser-console","status":"publish","type":"post","link":"https:\/\/mustafauzun.co\/blog\/javascript-css-in-browser-console\/","title":{"rendered":"Javascript, css in browser console"},"content":{"rendered":"\n<p>Did you know that with JavaScript, you can use CSS in the console for the browsers such as Chrome and Firefox.<\/p>\n\n\n\n<p>We use the %c prefix to do this.<\/p>\n\n\n\n<p>For example;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>console.log(&#39;%chello&#39;, &#39;background: red;&#39;)<\/code><\/pre><\/div>\n\n\n\n<p>Output;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"71\" height=\"25\" src=\"https:\/\/mustafauzun.co\/blog\/wp-content\/uploads\/2022\/09\/image-7.png\" alt=\"\" class=\"wp-image-142\"\/><\/figure>\n\n\n\n<p>For multiple CSS;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>console.log(&#39;%chello %cworld&#39;, &#39;background: red;&#39;, &#39;color: red;&#39;)<\/code><\/pre><\/div>\n\n\n\n<p>Output;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"123\" height=\"25\" src=\"https:\/\/mustafauzun.co\/blog\/wp-content\/uploads\/2022\/09\/image-8.png\" alt=\"\" class=\"wp-image-143\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Also, you can do this quickly with the object to css string function developed by me.<\/p>\n\n\n\n<p>(Source: <a href=\"https:\/\/github.com\/mrna0\/style.js\" data-type=\"URL\" data-id=\"https:\/\/github.com\/mrna0\/style.js\">My Github<\/a>)<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const style = ( styles = {} ) =&gt; {\n\n    let text = &#39;&#39;;\n\n    for(let key in styles) {\n\n        text += key.replace(\/([a-z])([A-Z])\/g, &#39;$1-$2&#39;)\n                    .replace(\/([A-Z])([A-Z])\/g, &#39;$1-$2&#39;)\n                    .toLowerCase() + &#39;:&#39; + styles[key] + &#39;;&#39;;\n\n    }\n\n    return text;\n\n}<\/code><\/pre><\/div>\n\n\n\n<p>Usage;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>style({ backgroundColor: &#39;red&#39;, color: &#39;white&#39; })<\/code><\/pre><\/div>\n\n\n\n<p>Output;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>background-color:red;color:white;<\/code><\/pre><\/div>\n\n\n\n<p>Using with console;<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>console.log(&#39;%cHello World&#39;, style({ backgroundColor: &#39;red&#39;, color: &#39;white&#39; }));<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that with JavaScript, you can use CSS in the console for the browsers such as Chrome and Firefox. We use the %c<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,8],"tags":[46,47,45],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","tag-console","tag-log","tag-style"],"_links":{"self":[{"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":5,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":148,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/148"}],"wp:attachment":[{"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mustafauzun.co\/blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}