使用 HTML5 的 contenteditable tabindex 扩展图像

HTML5 有一个新的属性，contenteditable，可以应用于任何元素，允许它直接在浏览器窗口中进行编辑。想想带有预定义值的文本输入，但它实际上可以是任何元素。表单元素（如文本输入）支持 :focus 伪类，这使我们能够在单击或以其他方式导航到这些元素时对其进行样式设置。给一个元素一个contenteditable属性意味着它现在也支持 :focus 伪类，这打开了一些有趣的功能！

我们将利用这个小技巧在一些内容中制作一个扩展的图像（就像没有覆盖层的灯箱）。

HTML5 标记

HTML5 有不错的元素可以包含带标题的图像。

<section class="image-gallery">

   <figure>
      <img src="images/img-1.jpg" alt="jump, matey" />
      <figcaption">Jump!</figcaption>
   </figure>

</section>

我们只需要给 figure 元素 tabindex，以便它可以处于焦点。

<figure tabindex=1>

给每个后续的 figuretabindex值高一个，图像就可以通过键盘很好地从一个到另一个进行切换！

图像

图像将是“全尺寸”。

这意味着它们将在页面上进行常规显示时进行缩小，并在我们进行神奇的 CSS 扩展时进行放大。对于不支持此功能的浏览器来说，这可能是一种带宽浪费。权衡取舍由您决定。

CSS

正常显示

figure { 
  width: 120px; 
  float: left; 
  margin: 0 20px 0 0; 
  background: white;
  border: 10px solid white; 
  -webkit-box-shadow: 0 3px 10px #ccc; 
  -moz-box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg); 
  -moz-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease; 
  -moz-transition: all 1s ease;
  position: relative;
}

figcaption { 
  text-align: center; 
  display: block; 
  font-size: 12px; 
  font-style: italic; 
}

figure img { 
  width: 100%; /* Scale down */
}

这部分 :focus 不是 CSS3，但阴影、变换和过渡是。悬停状态将稍微旋转图像，而 :focus 样式（当单击图像时）将扩展它，再次旋转它，并确保它使用 z-index 位于顶部。

figure:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg);
  -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
}

figure:focus {
  outline: none;
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5);
   -webkit-box-shadow: 0 3px 10px #666; -moz-box-shadow: 0 3px 10px #666;
  z-index: 9999;
}

浏览器兼容性

HTML5contenteditable属性在 Firefox 3.6+、Safari 4+、Chrome 和 Opera（仅测试 10.6）中受支持。请注意，该属性将级联到所有子元素。在我们的演示中，让图像和图片标题可编辑没有多大意义，因此我们可以单独关闭它们的编辑功能。

<figure contenteditable="true">
  <img src="images/img-1.jpg" alt="jump, matey" contenteditable="false" />
  <figcaption contenteditable="false">Jump!</figcaption>
</figure>

如果您忘记关闭图像的可编辑性，Firefox 看起来可能会有点怪异，因为它会给您图像提供调整大小的句柄。更新：使用tabindex的另一个原因。

Opera 尊重子元素不可编辑，但仍然会对它们运行拼写检查，并会用红色下划线标出它发现的拼写错误的单词，这可能有点奇怪。

我们的演示还依赖于变换来“工作”，但变换仅在当前的 WebKit 浏览器和 Firefox 4+ 中受支持。Firefox 3.6 支持变换，但不支持过渡。

回退是图像不会扩展，但这当然没什么大不了的。

演示和下载

查看演示   下载文件

相关

• 如果您正在寻找纯 CSS 灯箱（包括覆盖层），请查看 Stu Nicholls 版本.
• 如果您需要您的灯箱完全跨浏览器兼容，请使用 JavaScript，例如 jQuery 的 Colorbox 插件。

鸣谢

非常感谢 Adrian Sinclair，他联系了我关于这个想法，并帮助我完成了所有的事情。