A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
// Use Gists to store code you would like to remember later on | |
console.log(window); // log the "window" object to the console |
This is a Chinese version of https://gist.github.com/1207002/86f48cd3b3b72c85e6293926cf7c730de03b2f08 from lucasfais
⌘T | 前往文件 |
⌘⌃P | 前往项目 |
⌘R | 前往 method |
⌘⇧P | 命令提示 |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>fixed center and middle</title> | |
<style id="jsbin-css"> | |
div { | |
position: fixed; | |
width: 200px; | |
height: 200px; |
/* Smartphones (portrait and landscape) ----------- */ | |
@media only screen | |
and (min-device-width : 320px) | |
and (max-device-width : 480px) { | |
/* STYLES GO HERE */ | |
} | |
/* Smartphones (landscape) ----------- */ | |
@media only screen |
@media only screen and (max-width: 767px) { | |
} | |
@media only screen and (min-width: 768px) { | |
} | |
@media only screen and (min-width: 992px) { | |
} | |
@media only screen and (min-width: 1200px) { |
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
There are a couple of likely reasons this warning could be appearing:
Are you using {...this.props}
or cloneElement(element, this.props)
? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
React does not yet reco
The reflow appens as many times as there are frames per seconds. It recalculate all positions that change in order to diplay them. Basically, when you scroll you execute a function where you move things between two reflows. But there are functions that triggers reflows such as jQuery offset, scroll... So there are two things to take care about when you dynamically change objects in javascript to avoid too many reflows: