分类：h5+css3

纯css3实现思维导图样式

思维导图又称之为脑图

他大概是这个样子滴：

 

网上大部分实现有用d3.js实现，有手动用svg实现，最近工作需要，本人很懒，在琢磨看看用css3能不能实现呢？

答案是肯定的 下面上代码

html代码


<div class="mainBody" id="node1">
    <h1>node1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>node2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>node3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>node4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
                <div class="mainBody">
                    <h1>node3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>node2</h1></div>
        <div class="mainBody"><h1>node2</h1></div>
    </div>
</div>

css3代码


.mainBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: row;
    justify-content: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#node1{
    /*height: 200px;*/
    margin-top: 100px;
    margin-left: 100px;
}
h1{
    line-height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

实际效果如图：

哦有点简陋····不过样式什么的你想怎么搞就怎么搞喽，其中节点的增加，你只需要html中增加相应的节点代码就行，高度位置都是自适应的，感谢css3的 flex，你们活在这个时代是幸福的

第三方 CSS 并不安全

最近一段时间，关于 通过 CSS 创建 “keylogger”（键盘记录器） 的讨论很多。

有些人呼吁浏览器厂商去“修复”它。有些人则深入研究，表示它仅能影响通过类 React 框架建立的网站，并指责 React。而真正的问题却在于认为第三方内容是“安全”的。

第三方图片

<img src="https://example.com/kitten.jpg">

如果我将上述代码引入我的文件中，即表示信任 example.com。对方可能会删除资源，给我一个 404，导致网站不完整，从而破坏这种信任关系。或者，他们可能会用其他非预期的数据来替代小猫图片的数据。

但是，图片的影响仅限于元素本身的内容区域。我可以向用户解释并希望用户相信，“此处的内容来自 example.com，如果它有误，则是原站点的问题，并不是本站造成的”。但这个问题肯定不会影响到密码输入框等内容。

第三方脚本

<script src="https://example.com/script.js"></script>

与图片相比，第三方脚本则有更多的控制权。如果我将上述代码引入我的文件中，则表示我赋予了 example.com 完全控制我的网站的权限。该脚本能：

  • 读取/修改页面内容。
  • 监听用户的所有交互。
  • 运行耗费大量计算资源的代码（如 cryptocoin 挖矿程序）。
  • 通过向本站发请求，这样能附带用户的 cookie，转发响应。（译注：盗取用户的 cookie 及其他数据）
  • 读取/修改本地存储。
  • ……可以做任何对方想做的事情。

“本地存储”非常重要。如果脚本通过 IndexedDB 或缓存 API 发起攻击，则即使在删除脚本后，攻击仍可能在整个站点内继续存在。

如果你引入了其他站点的脚本，则必须绝对相信对方及对方的防护能力。

如果你遭到恶意脚本的攻击，则可设置 Clear-Site-Data header（清空站点数据响应头） 清除站点所有数据。

第三方CSS

<link rel="stylesheet" href="https://example.com/style.css">

相比图片，CSS 在能力上更接近脚本。像脚本一样，它适用于整个页面。它可以：

  • 删除/添加/修改页面内容。
  • 根据页面内容发起请求。
  • 可响应多种用户交互。

虽然 CSS 不能修改本地存储，也不能通过 CSS 运行 cryptocoin 挖矿程序（也许是可能的，只是我不知道而已），但恶意 CSS 代码仍然能造成很大的损失。

键盘记录器

从引起广泛关注的代码开始讲起：

input[type="password"][value$="p"] {
  background: url('/password?p');
}

如果输入框的 value 属性值以 p 结尾，上述代码将会向 /password?p 发起请求。每个字符都可触发这个操作，通过它能获取到很多数据。

默认情况下，浏览器不会将用户输入的值存储在 value 属性中，因此这种攻击需要依赖某些能同步这些值的东西，如 React。

要应对这个问题，React 可用另一种同步密码字段的方式，或浏览器可限制那些能匹配密码字段属性的选择器。但是，这仅仅是一种虚假的安全。你只解决了在特殊情况下的该问题，而其他情况依旧。

如果 React 改为使用 data-value 属性，则该应对方法无效。如果网站将输入框更改为 type="text"，以便用户可以看到他们正在输入的内容，则该应对方法无效。如果网站创建了一个 <better-password-input> 组件并暴露 value 作为属性，则该应对方法无效。

此外，还有很多其他的基于 CSS 的攻击方式：

消失的内容

body {
  display: none;
}

html::after {
  content: 'HTTP 500 Server Error';
}

以上是一个极端的例子，但想象一下，如果第三方仅对某一小部分用户这样做。不但你很难调试，还会失去用户的信任。

更狡猾的方式如偶尔删除“购买”按钮，或重排内容段落。

添加内容

.price-value::before {
  content: '1';
}

哦，价格被标高了。

移动内容

.delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

上面的按钮能做一些重要的操作，设置其为不可见，然后放在用户可能点击的地方。

值得庆幸的是，如果按钮的操作确实非常重要，网站可能会先显示确认对话框。但也不是不可绕过，只需使用更多的 CSS 来欺骗用户点击 “确定” 按钮而不是“取消”按钮即可。

假设浏览器确实采用上面的应对方法解决“键盘记录器”的问题。攻击者只需在页面上找到一个非密码文本输入框（可能是搜索输入框）并将其盖在密码输入框上即可。然后他们的攻击就又可用了。

读取属性

其实，你需要担心的不仅仅是密码输入框。你可能在属性中保存着其他的隐藏内容：

<input type="hidden" name="csrf" value="1687594325">
<img src="/avatars/samanthasmith83.jpg">
<iframe src="//cool-maps-service/show?st-pancras-london"></iframe>
<img src="/gender-icons/female.png">
<div></div>

所有这些都可以通过 CSS 选择器获取，且能发出请求。

监听交互

.login-button:hover {
  background: url('/login-button-hover');
}

.login-button:active {
  background: url('/login-button-active');
}

可将 hover 和 active 状态发送到服务器。通过适当的 CSS，你就能获取到用户意图。

读取文本

@font-face {
  font-family: blah;
  src: url('/page-contains-q') format('woff');
  unicode-range: U+85;
}

html {
  font-family: blah, sans-serif;
}

在这种情况下，如果页面内有 q 字符，则会发送请求。你可以为不同的字符，并针对特定的元素，创建大量不同的字体。字体也可以包含 ligature（连字），所以你可以在开始检测字符序列。你甚至可以通过将字体技巧与滚动条检测结合起来 来推断内容。

译注：关于 ligature（连字）, 可查看 Wikipedia Typographic Ligature

第三方内容不安全

这些只是我所知道的一些技巧，我相信还有更多。

第三方内容在其沙箱区域内具有强大的能力。一张图片或沙盒化的 iframe 仅在一个小范围内的沙箱中，但脚本和样式的范围却是你的页面，甚至是整个站点。

如果你担心恶意用户诱使你的网站加载第三方资源，可以通过 CSP 用作防护手段，其可以限制加载图片，脚本和样式的来源。

你还可以使用 Subresource Integrity（子资源完整性 ） 来确保脚本/样式的内容匹配特定的 hash，否则将不加载。感谢 Hacker News上的Piskvorrr 提醒我！

如果你想了解更多如上述的 hack 技巧，包括滚动条技巧，更多信息请参阅 Mathias Bynens’ talk from 2014，Mike West’s talk from 2013，或 Mario Heiderich et al.’s paper from 2012（PDF）。是的，这不是什么新东西。

[译]构建高性能展开&收缩动画

原文地址：https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
原文标题：Building performant expand & collapse animations
原文作者：Paul Lewis, Stephen McGruer
翻译：杜梦杰
示例：https://dumengjie.github.io/blog-demos/animated-clip/

TL;DR

进行动画操作时使用scale变换（即transform: scale）。通过限制缩放来阻止子元素在动画过程中变形。

我们之前已经发布过高性能视差滚动和无限滚动效果的文章。本文将讨论如何创建高性能的裁剪动画（Github repo）。

以展开菜单为例：

继续阅读[译]构建高性能展开&收缩动画

从一个简单弹出菜单来说说什么是完美实现需求

如何优化一个弹出菜单

一个弹出菜单有什么优化的？无非就是简单的显示隐藏··
比如这样：

其实无论是从产品还是运营，都不会很在意这一点，大家都觉得很正常，因为都是这么干的啊，没有什么特别的啊，还能怎么样啊？

有一些想法的童鞋可能会加一个效果把？比如jquery的下拉效果slideDown()：

说实话这种效果几年前还是很流行的，但是动画效果真的很low 有没有？

说到这里可能有人在问 ，是不是故意在挑刺啊，真不是，我想要的效果是那种带有动画效果，让人眼前一亮，但是又不显得突兀，说实话，当技术人员听到这种模棱两可的描述都有杀人的冲动，好吧，幸亏这种效果我已经做出来了：

从效果上只是加了个 弹出 的效果，你没看错，我仅仅就是想要一个弹出菜单 。

好了到了这里其实我们的弹出菜单已经够让人眼前一亮了，但是还不够，我们知道在移动端还存在着300ms的延迟，就是总是让人感觉点击的不痛快，迟钝，尤其是刚刚从app切过来，
所以这里我们要解决这个问题，嗯，加个fastclick即可；

前端用户体验的思考

一个简单的弹出菜单尚有这么多可以优化的地方，放到全站我相信可以优化的地方就更多啦；

其实90%的公司是没有优化用户体验这么个专职，这时候就需要前端岗位的童鞋要有一个自我驱动的精神，当然不是说，我能作出一个酷炫的弹出菜单就是好，而是要运用我们所掌握的或是知道的技术，去 完美实现需求！

什么是完美实现需求：就是能够合理达到产品的要求，同时考虑到了用户体验，又在技术实现上能够更好的维护和迭代··

说实话，能够达到完美实现需求有时候简直要了开发人员的小命，为什么？你可能会同时面对leader的压力，产品的压力，测试的压力，大家都在等着你快点完成，你却说你还在完善，你要做的更加完美？
所以不容易，这就需要我们前端开发人员在平时要多积累，多思考，否则，··你可能会被k掉···

举例说明 完美需求

这个弹出菜单不是很具有代表性，我简单举一个栗子来说明如何是完美的需求（当然这个栗子可能还达不到完美需求的地步）；

需求很简单，就是我们常见的登陆页！一般情况下，我们首次进入首页，点击需要登录查看的信息，是不是都要跳转到登陆页？

这是h5的通病啦～浏览器会刷呀刷的，使出来吃奶的劲加载出了登陆页，然后我们登录啦！然后又要刷呀刷的跳转回去？对不对？

这时候小a同学已经实现了这块功能，但是他是一个有自我驱动精神的同学，他觉得能不能实现app那种直接弹出登录框的感觉？

有了目标其实就好做啦！于是小a同学做出了这样的效果：

是不是用户体验效果一下子有了质的飞跃？

不过要用户体验是有代价的，主要有这么几个问题：

1、页面弹出的时候要屏蔽触摸，否则当页面大于一屏就会盖不住了··
2、要列出每一个需要呼出登录弹出层的按钮加以判断；
3、页面弹出的css3动画优化问题；
4、最头疼的问题是有些在服务端渲染的数据可能要用异步方式来实现了
5、其他零碎的样式兼容问题

其他问题都好说，第4条意味着php童鞋也要为了你的一个想法去大量修改代码，因为当登陆完成 ，登陆层缩回去的时候客户要看到登陆后的数据啦···
最后大家商量的办法是：当登录完成后弹出层不回去啦，直接刷新页面···

好吧这就是不完美的地方···这样同步渲染的数据就不需要改成异步的了···

那么对于最后：如何在技术实现上能够更好的维护和迭代？

之前所有的登录都是跳转到同一个登录页面，那么当我们要修改登录页的样式的时候只需要改一遍啦··

现在的情况是，莫名的登录弹出层哪哪都是···

当然啦这个问题也好解决，就是使用php的smart模版，提取一个公共的登录弹出模版，在需要的页面插入即可,比如这样：

<!-- 登录弹窗 -->
<div class="popLogin none">
    {include file="_common/login.htm" method="pop"}
</div>

嗯，对于一个具有自我驱动的精神的小a同学还是觉得不完美，因为登陆页和登录弹出层还是多了一次修改，那么小a又做了一次修改，就是把登录弹出层的代码也以smart的模版插入到登陆页；
这样全站所有的登录部分都是使用的同一个模版，样式和js代码！
完美手工！

结束语

一个好的前端工程师就是一个好的产品和一个好的用户体验，童鞋们，加油吧，前端的路本不平坦，只有具有自我驱动的精神，才能更快的成长！

[译]构建高性能展开&收缩动画

原文地址：https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
原文标题：Building performant expand & collapse animations
原文作者：Paul Lewis, Stephen McGruer
翻译：杜梦杰
示例：https://dumengjie.github.io/blog-demos/animated-clip/

TL;DR
继续阅读[译]构建高性能展开&收缩动画

css3动画的更深层次的探究（矩阵变换）

css3img

前言

其实无论哪一门技术的发展都有其根源可揪，我之前做了一些css3动画的效果，对css3流畅而又实现简单的动画效果深深着迷，遂决定探究下css3动画的来世今生，
本文如有疏漏，请各位看官及时指出，以防误导更多学习的童鞋，随着本文的深入，对看官的数学功底有一定的要求。
继续阅读css3动画的更深层次的探究（矩阵变换）