search

evantianx / Bloooooooog

Place to record what I thought and learned
0 stars 0 forks source link

[周读] #11

Open evantianx opened 7 years ago

evantianx commented 7 years ago

12个Chrome调试知识

原文链接： Twelve Fancy Chrome DevTools Tips

evantianx commented 7 years ago

8个很有用的HTML5标签

evantianx commented 7 years ago

基本的HTML5模版

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <!--<title>是<head>唯一强制要求的标签-->
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--It should be noted that if you’re using a JavaScript library that 
deals with HTML5 features or the new APIs, it’s possible that it will 
already have the HTML5-enabling script present; in this case, 
you could remove reference to the script. One example of this would 
be Modernizr, a JavaScript library that detects modern HTML and CSS features.
 Modernizr gives you the option to include code that enables the HTML5 
elements in older versions of IE, so the shiv would be redundant. 
We take a closer look at Modernizr in Appendix A.-->
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <script src="js/scripts.js"></script>
</body>
</html>

The meta element 原文链接A Basic HTML5 Template For Any Project

evantianx commented 7 years ago

Debug的艺术

作者将debug分为三个阶段:

The Art of Debugging

evantianx commented 7 years ago

使用真实网络环境进行测试

主要介绍了一些工具的使用

原文链接: Testing with Realistic Networking Conditions

evantianx commented 7 years ago

你真的了解CSS中的display吗?

Evolution of CSS Layout: 1990s to the Future How Browsers Work: Behind the scenes of modern web browsers

原文链接: How well do you know CSS display?

evantianx commented 7 years ago

12个鲜为人知的CSS事实

原文链接: 12 Little-Known CSS Facts (The Sequel)

evantianx commented 7 years ago

如何在限定宽度的父级中设置一个全屏宽的容器?

The issue is: how do we make a full-browser-width container when we're inside a limited-width parent?

以下为默认代码:

<!-- parent -->
<main>

  <p>Stuff.</p>

  <!-- container we want to be full width -->
  <figure class="full-width">
    <!-- could be whatever content -->
    <img src="dog.jpg" alt="">
  </figure>

</main>

若已知父级宽度为百分比宽度

那么我们就可以按照比例将container撑开:

main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}

若已知父级宽度为非百分比宽度

The amount we want to "pull" to the left and right is half the width of the browser window plus half the width of the parent. (Assuming the parent is centered.)

@media (min-width: 500px) {
main {
width: 500px;
margin: 0 auto;
}
.full-width {
margin-left: calc(-100vw / 2 + 500px / 2);
margin-right: calc(-100vw / 2 + 500px / 2);
}
}

也可以使用translate属性:

@media (min-width: 40em) {
.full-width {
width: 100vw;
transform: translateX(calc((40em - 100vw)/2));
}
}

更兼容的写法:

/*把回退样式写在该样式前面*/
@supports (width: 100vw) {
.full-width {
width: 100vw;
}
@media all and (min-width: 40rem) {
.full-width {
transform: translateX(calc((40rem - 100vw)/2));
}
}
}

据测试在Edge下无效，在Chrome下偶尔会应用，只有在FF下正常。

无需clac()

首先用left:50%将container左侧边缘置于屏幕正中央，然后利用margin-left: -50vw将其拉伸到左屏幕边缘:

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

需要设定right:50%和margin-right: -50vw的原因是，有可能网页设置了direction: rtl。所以如上设置更为保险。 需要注意的是此方法同上述方法都需要父级元素完全居中

原文链接: Full Width Containers in Limited Width Parents

evantianx commented 7 years ago

关于提升前端性能的研究

待读

原文链接: A Case Study on Boosting Front-End Performance

evantianx commented 7 years ago

jQuery依旧坚挺么？

关于jQuery在当下环境的讨论

原文链接: Is jQuery Still Relevant?

evantianx commented 7 years ago

什么是闭包?

“Program to an interface, not an implementation.” ——Design Patterns: Elements of Reusable Object Oriented Software