web前端

如何使用Web Share API 在网页调用系统的分享按钮

网络共享API是一个似乎已在雷达之下消失了,因为它是在Chrome 61首次推出为Android。从本质上讲,它提供了一种直接从网站或Web应用程序共享内容(例如链接或联系人卡片)时触发设备(或桌面,如果使用Safari)的本机共享对话框的方法。

虽然用户已经可以通过本地方式从网页共享内容,但他们必须在浏览器菜单中找到该选项,即使这样,也无法控制共享内容。通过引入此API,开发人员可以利用用户设备上的本机内容共享功能,将共享功能添加到应用程序或网站中。

iOS提供了许多本机共享选项。

与传统方法相比,这种方法具有许多优点:

  • 与您在DIY实施中可能拥有的有限数量相比,向用户提供了广泛的共享内容选项。
  • 您可以通过取消来自各个社交平台的第三方脚本来改善页面加载时间。
  • 您无需为不同的社交媒体网站和电子邮件添加一系列按钮。单个按钮足以触发设备的本机共享选项。
  • 用户可以在自己的设备上自定义其首选共享目标,而不仅限于预定义的选项。

CSS Grid 网格布局教程

一、概述

网格布局(Grid)是最强大的 CSS 布局方案。

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。

上图这样的布局,就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。…

    

CSS Grid 布局完全指南(图解 Grid 详细教程)

本文最后更新于 2018年11月20日。推荐姊妹篇:Flexbox 布局完全指南(图解 Flexbox 布局详细教程)

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你就可以轻松使用 Grid(网格) 布局。…

    

一行css代码搞定响应式布局

在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。ok,让我们发车吧。

    

原生HTML实现带搜索框的select下拉框

原生HTML实现带搜索框的select下拉框

可以用 HTML <datalist> 标签实现

实例:

下面是一个 <input> 元素,<datalist> 中描述了其可能的值:

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
<input type="submit">
</form>

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input>

2019 前端框架对比及评测

Jacek Schae 原作,授权 LeanCloud 翻译。

我们将基于 RealWorld 示例应用对比前端框架。RealWorld 示例应用的特点:

  • RealWorld 应用

    比待办事项类应用更复杂。通常待办事项类应用不足以传达足够多的知识见解构建实际应用。

  • 标准化

    项目遵循特定规则。提供后端 API、静态标记语言、风格、API 规范。

  • 专业人士编写、审阅

    理想情况下,会是高一致性、高真实度的项目,由使用该技术的专业人士编写或审阅。

如何在不破坏事物的情况下创建黑暗主题

我的名字是弗拉基米尔,我为Yandex Mail开发移动前端。我们的应用程序暂时有一个黑暗的主题,但它不完整:只有界面和普通的电子邮件是黑暗的。具有自定义格式的消息仍然很轻,并且在黑暗的界面上脱颖而出,在晚上伤害了用户的眼睛。

 

今天我会告诉你我们是如何解决这个问题的。您将了解两种对我们不起作用的简单技术以及最终实现这一技巧的方法 - 自适应页面重新着色。我还将分享一些关于使图像适应黑暗主题的想法。公平地说,使用自定义CSS的页面变暗是一项相当特殊的任务,但我相信你们中的一些人可能会发现我们的经验很有帮助。…

解决Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题。

Slick 是个网页轮播组件 https://github.com/kenwheeler/slick

Animate.css是一个css3动画库https://github.com/daneden/animate.css

两者常结合使用,能达到比较好的效果。

但是 Slick slider 用 animate.css动画时,第一个slider动画不起作用的问题,可以用以下方法解决!

html代码:

<div id="hero-slider">
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/1');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInLeftBig" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="fadeInUpBig" data-delay="1s">LEARN MORE</a>
                </div>