Category Archives: Javasript

The Difference between $(document).ready, window.onload and $(window).load(function (){})

$(document). Ready: it is executed after the DOM structure is drawn, and there is no need to wait until the loading is completed. This means that after the DOM tree is loaded, it will be executed without waiting for the pictures or other external files in the page to be loaded. And can write multiple. Ready.

window.onload : all elements of the page are loaded, including pictures and other elements. It can only be executed once. Therefore, the execution time of $(document). Ready is earlier than window.onload . And can write many, look at the code:

//The following code does not execute correctly. 
window.onload = function()
{ 
alert(“text1”); 
}; 
window.onload = function()
{ 
alert(“text2”); 
}; 
//The result is only the second output Can write more than one at the same time 
// The following code is executed correctly. 
$(document).ready(function()
{ 
alert(“Hello World”); 
}); 
$(document).ready(function()
{ 
alert(“Hello again”); 
}); 
//The results output both times

If you need to get the attribute values of DOM binding elements, it is best to use window.onload , because it is executed after all the elements are loaded. If you use $(document). Ready, the DOM has been loaded, but the element attributes bound to the DOM have not been loaded, so the attributes do not take effect. To solve this problem, you can use the load () method, another page loading method in jQuery. The load () method binds a handler to the onload event of the element. If the processing function is bound to a window object, it will be triggered after all the contents (including windows, frames, objects and images) are loaded. If the processing function is bound to an element, it will be triggered after the contents of the element are loaded.

//Jquery Code： 
$(window).load(function ()
{ 

});
//is equivalent to the following code in JavaScript 
Window.onload = function ()
{
 
}

Conclusion:

1. window.onload=function () {} is to wait for all content to be loaded, such as image, content, JS, CSS, etc.

2. $(function () {}) is to wait for the DOM to be loaded (my understanding is after the label is drawn), and it can be executed even when the picture is not loaded.

3. $(function () {}) is the abbreviation of $(document). Ready (function () {}). The function is the same.

4. $(window). Load (function () {}) is executed after all the contents are loaded.

5. Whether it’s the external chain JS or the JS in the page window.onload Only the last one is executed

6. $(window). Load (function () {}) can have more than one, and all of them are executed in sequence.

[Vue warn]: You may have an infinite update loop in a component render function 

[Vue warn]: You may have an infinite update loop in a component render function

It’s a strange question. I’ve never met it before. If it’s a project led by myself, it’s easy to do. Just debug it slowly. It happens that I encounter this problem in the company’s project, and the system structure of the company’s project is very complex, and I haven’t fully mastered it. What’s more, it’s very difficult to debug because of the complexity of the system. In addition, there is no testing framework. It’s hard to do

It was 3 o’clock or 4 o’clock in the afternoon when I was hungry. As a result, I fell into a state of hypoglycemia again. It’s a real house leak. It’s rainy and rainy, and the boat is small. I’m so hungry that my brain aches

But I finally got Google + debug. In fact, in the V-for loop, if you use methods or calculated attributes to operate VM. $data’s attributes, in theory, it may cause an infinite loop because you modify the loop object. At this point, Vue will issue a warning (not really infinite loop).

For example, such a component contains a set of buttons implemented with : checked + < label> . It has the following functions:

To be able to group, you need to set their name attributes

In order to control <input> with <label> , you need to set ID for <input>

The button can be deleted

So I chose to do this:

<template>
<div>
  <template v-for="(item, index) in items">
    <input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
    <label :for="getID(false)">
    <button type="button" @click="remove(index)"&>&times;</button>
  </template>
</div>
</template>

<script>
let count = 0;

export default {
  data() {
    return {
      selfIndex: 0,
      itemIndex: 0,
    }
  },
  methods: {
    getID(increase = true) { // Note that this is where the problem lies
      if (increase) {
        this.itemIndex++;
      }
      return `my-component-${this.selfIndex}-${this.itemIndex}`;
    },
  },
  beforeMount() {
    this.selfIndex = count;
    count++;
  }
}
</script>

Here, in order to generate a unique ID, I choose to use the vm.itemIndex ++, the problems mentioned above will appear, and there are hidden dangers.

There are two solutions: one is to put itemindex in local variables, so that it is not directly associated with components; the other is to write a global unique ID generating function, and then reference it. The principle is the same. The repetitive part will not be written. After modification, it is generally as follows:

Scheme 1

<script&>
let count = 0;
let itemCount = 0; // Put the element counter here

export default {
  methods: {
    getID(increase = true) {
      if (increase) {
        itemCount++;
      }
      return `my-component-${this.selfIndex}-${itemCount}`;
    }
  }
};
</script&>

Scheme 2

// helper.js get the unique id
let count = 0;
export default function uniqueID(increase = true) {
  if (increase) {
    count++;
  }
  return `prefix-${count}`;
}

// Original components
import uniqueID from './helper';

export default {
  methods: {
    getID(increase = true) {
      let id = uniqueID(increase);
      return `my-component-${this.selfIndex}-${id}`;
    }
  }
}

Interaction between web browser and JavaScript in WPF

. JS reference

HTML

<button onclick="window.external.Test('called from script code')">
    call client code from script code
</button>

C code in WPF Code:

public void Test(String message)
{
    MessageBox.Show(message, "client code");
}

Communication between WPF and JavaScript requires full trust, so you need to add the following code:

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[ComVisible(true)]
public class MainWindow
{
    public void Test(String message)
    {
        MessageBox.Show(message, "client code");
    }
}

I do that a lot

//webbrowser sets a context for script callbacks
mywebbrowser.objectForScription = nwe scriptCallBackContext();


[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[ComVisible(true)]
public calss scriptCallBackContext
{

    public void Test(String message)
    {
        MessageBox.Show(message, "client code");
    }
}

c#Tune ate JS method

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    string curdir = Directory.GetCurrentDirectory();
    webBrowser.Navigate(String.Format("file:///{0}/test.html", curdir));
    webBrowser.LoadCompleted += (ss, ee) =>
    {
        var jsCode = "fillData('data...');";
        dynamic doc = webBrowser.Document;
        webBrowser.InvokeScript("execScript", new Object[] { jsCode, "JavaScript" });
    };
}

myscripts.js：

function fillData(data)
{
    //document.getElementById("uname").value = data;
    var oVDiv = document.getElementById("uname");
    //oVDiv.setAttribute("vaue", data);
    oVDiv.value = data;

    //oVDiv.value = data;
    //document.write(data);
}

 

XMLHttpRequest status=0 (All You Should Know) 

error:function(XHR,textStatus,errorThrown){
            
            if (XHR.status == 403){
                var errMsg = XHR.responseText.replace(/\"/g,"");
                swal({
                     title:errMsg,
                     text:'3 s later will closed',
                     timer:3000,
                     type:'error'
                 });
            } else {
                swal({
                    title:'Internal server error,sorry!',
                    text:'3 s later will closed',
                    timer:3000,
                    type:'error'
                });
            }

original content

In fact, this article is not only about the problem of XMLHttpRequest status = 0, but also about some problems encountered by Ajax and my reflection.

Let’s look at the whole example


<html>  
<head>  
<script type="text/javascript">  
    var xmlhttp;  
    function loadXMLDoc(url) {  
        xmlhttp = null;  
        if (window.XMLHttpRequest) {// code for all new browsers  
            xmlhttp = new XMLHttpRequest();  
        } else if (window.ActiveXObject) {// code for IE5 and IE6  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
  
        if (xmlhttp != null) {  
            xmlhttp.onreadystatechange = state_Change;  
            xmlhttp.open("GET", url, true);  
            xmlhttp.send(null);  
        }  
    }  
  
    function state_Change() {  
        if (xmlhttp.readyState == 4) {  
            alert(xmlhttp.status);  
            alert(xmlhttp.responseText);  
            if (xmlhttp.status == 200) {  
                alert("200");  
            } else {  
                alert(xmlhttp.status);  
                alert("Problem retrieving XML data");  
            }  
        }  
    }  
</script>  
<title>Document</title>  
<button onclick="loadXMLDoc('file:///E:/test2.html')">click</button>  
</head>  
<body>  
</body>  
</html>

1. Why xmlhttp.onreadystatechange = state_ Change instead of xmlhttp.onreadystatechange = state_ Change();

Isn’t it written in () to call a function?Does it look for a function based on its name?After asking a few front-end teachers, they felt that they were all vague and didn’t understand the real reason. Finally, they went to consult another elder martial brother.

The purpose is to give the entire function to onreadystatechange instead of returning the last processed value of the function to onreadystatechange.

Again, I saw the XMLHttpRequest object when I reread the XML tutorial recently, and immediately linked it with Ajax.

W3C, which is used to exchange data with the server in the background, is the developer’s dream .

Today’s browsers can get objects directly through new, but ie can’t, xmlhttp = new activexobject（“ Microsoft.XMLHTTP “);

At the same time, when IE6 is running, the browser will prompt you to set ActiveX.

Onreadystatechange is an event handle. It also has onclick functions. When there is a click event, it will be processed specifically. It depends on how your function is written. Onreadystatechange is triggered by readyState, which stores the state of XMLHttpRequest

0: request not initialized
1: server connection established
2: request received
3: request processing
4: request completed and response ready

When readyState is changed, call the onreadystatechange function. Note that this function is used. Do we want to assign a function to it instead of simply returning a value.

So the problem is solved.

At the same time, it is different from:

<button onclick="dodo()">click</button>

This is in HTML. Although it is also an event handle, its format is different. The one above is in JS code.

2. XMLHttpRequest status = 0 problem.

xmlhttp.readyState =4, all the time xmlhttp.status ！ = 200。 It’s easy to output and find out xmlhttp.status=0 There is no such status code in the HTTP protocol. Finally, we find a description of XMLHttpRequest http://www.w3.org/TR/XMLHttpRequest/ .

The status attribute must return the result of running these steps:

The status value must return the result of running these steps.

1. If the state is unsent or open, return 0.
2. If the error flag is set, return 0.
3. Return the HTTP status code

If the above two situations appear before HTTP returns, 0 will appear.

Let’s talk about two buttons, one is the URL: File:///E/test2.html, the other is: http://www.baidu.com .

The first button’s URL access is only opened locally, but not through the server. You can use Wireshark to catch packets (thank you for your advice).

There is also a problem, that is xmlhttp.readyState It always changes

1: Server connection established

2: Request received

3: Request processing

4: The request has completed and the response is ready.

In this case, xmlhttp should be simulating itself, because it didn’t pass the server at all. It’s just local. Open, so the status is 0.

Although the URL access of the second button is other domain names, packet capture is available, but it is cross domain access

If the cross-origin request status is network error

This is a network error.

Although I visited it, it should be because the browser’s cross domain return header is not allowed, so the browser blocks the access control allow origin attribute.

The real way is to visit the URL in your domain name on your own server.

Run on Tomcat:

<button onclick="loadXMLDoc('http://localhost:8080/TestServlet/MyServlet')">click</button>

Finally, I’m reflecting. I’ve been looking for the answer to the question, but when I asked some of them, I just gave them the answers that came with Baidu. Some people even ignored this question after I said that there was a mistake after adding brackets, and they could use it. But I asked a senior brother not only this answer, because this senior brother is very good at the front end, and the most important thing is that he is a technology enthusiast. He gave me the analysis of the first question, and then he went to Google to go deeper.

The gap in technology is about this. It may not be big now, but in a few years, it is estimated that it will not be a level.

The difference between people is just the same.

Finally, I would like to thank another person, who let me see the experience of a full stack engineer. The front end and the back end are connected and killed, so are the bottom layer and the business logic. A few words can connect the things I checked in the afternoon, so does the so-called real programmer. I was very excited and admired to have a talk with him. People who love technology have nothing to do with it.

Summary of internationally renowned CSS Reset

NO.01 CSS Tools: Reset CSS

Website: https://meyerweb.com/eric/tools/css/reset/

Pros: Old brand, with a lot of people.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

NO.02 yui: Reset CSS

Website: https://yuilibrary.com/yui/docs/cssreset/

Advantages: Yahoo legacy, big works

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

NO.3HTML5 Reset Stylesheet

Website: https://www.webfx.com/blog/web-design/css-reset-stylesheets/

gitHub: https://github.com/murtaugh/HTML5-Reset/blob/master/assets/css/reset.css

Pros: News

/*
    HTML5 Reset :: style.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:
    Eric Meyer                    :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate    :: http://html5boilerplate.com
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

main, article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {max-width: 100%;}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
    In fact, it *will* cause problems with Google Maps' controls at small size.
    If this is the case for you, try uncommenting the following:
#map img {
        max-width: none;
}
*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
    you'll have to restore the bullets within content,
    which is fine because they're probably customized anyway */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: separate; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }

NO .4 Normalize.css

Website: https://necolas.github.io/normalize.css/

Advantages: it’s not CSS Reset, but keeping the same element consistent in different browsers

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}